jQuery .on在類更改後不能使用鏈接

在我的代碼中，我將link的class從user更改爲red。這個想法是，與紅色班級的鏈接不應該單擊工作。但它仍然如此。爲什麼會發生？我正要使用live，但讀取它已過時，我應該使用on。jQuery .on在類更改後不能使用鏈接

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Test</title> 

<script type="text/javascript" src="http://localhost/site/scripts/jQuery.js"></script> 

<script type="text/css"> 
.red{ 
color:red; 
} 
</script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".user").on("click",function() { 
    alert('Was Clicked'); 
     var idPri = $(this).data("id"); 
     var idSec = $(this).data("sec"); 
     $('.user[data-id="'+idPri+'"][data-sec="'+idSec+'"]').removeClass('user').addClass('red'); 
     $('.h2[data-id="'+idSec+'"]').find('span[data-sec="'+idSec+'"].user').remove(); 
     }); 
     return false; 
    }); 
</script> 
</head> 
<body> 

<div id="container"> 
    <div class="h2" data-id="2">Who is your favorite Math teacher? 
     <div>* User Name <span class="user" data-id="3" data-sec="2">Like</span></div> 
     <div>* User Name <span class="user" data-id="4" data-sec="2">Like</span></div> 
     <div>* User Name <span class="user" data-id="5" data-sec="2">Like</span></div> 
     <div>* User Name <span class="user" data-id="6" data-sec="2">Like</span></div> 
     <div>* User Name <span class="user" data-id="7" data-sec="2">Like</span></div> 
    </div> 
</div> 

</body> 
</html>

來源

2013-10-20 jmenezes

您可以嘗試使用委派events.But如果你想使用.user類本身，那麼你可以做這樣的事情：

$(document).ready(function() { 
$(".user").on("click",function() { 
    if($(this).hasClass('red')){ 
     return false; 
    } 
alert('Was Clicked'); 
    var idPri = $(this).data("id"); 
    var idSec = $(this).data("sec"); 

    $('.user[data-id="'+idPri+'"][data-sec="'+idSec+'"]').removeClass('user').addClass('red'); 
    $('.h2[data-id="'+idSec+'"]').find('span[data-sec="'+idSec+'"].user').remove(); 
    }); 

    });

檢查在這裏演示：http://jsfiddle.net/PkBAq/

來源

2013-10-20 11:06:00

您正在使用直接事件處理程序。當您致電$(".user").on("click",function() {時，事件處理程序將附加到您的元素。稍後當您將您的課程更改爲red,時，事件處理程序已連接並且仍然會觸發。在你的情況，你可以嘗試委託的事件處理程序：

$("#container").on("click",".user",function() {

委派的事件處理程序，在另一方面，進行動態評估，因爲該事件處理程序不直接連接到元素，但到容器代替。

來源

2013-10-20 10:56:12

我可以使用'.user'代替'＃容器'嗎？我需要這種方式... – jmenezes

我嘗試使用'活力'，它可以正常工作，我貼的代碼。使用「live」有什麼問題？ – jmenezes

@jmenezes：不，＃容器是包含你的'.user'元素的父節點。 –

您必須在容器上使用on以便事件可以委派。

$("#container").on("click",'.user',function() { 
alert('Was Clicked'); 
    var idPri = $(this).data("id"); 
    var idSec = $(this).data("sec"); 
    $('.user[data-id="'+idPri+'"][data-sec="'+idSec+'"]').removeClass('user').addClass('red'); 
    $('.h2[data-id="'+idSec+'"]').find('span[data-sec="'+idSec+'"].user').remove(); 
    }); 
    return false; 
});

這裏是小提琴http://jsfiddle.net/JPGqq/

來源

2013-10-20 11:04:37

試試這個：

$(".user","#container").on("click",function() {});

來源

2013-10-20 11:18:15 KrishnaDhungana

jQuery .on在類更改後不能使用鏈接

回答

相關問題