0

在下面的代码中，我将classa linkfrom更改user为red。这个想法是红色类的链接不应该在点击时起作用。但它仍然存在。为什么会这样？我正要使用live，但读到它已被弃用，我应该使用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>
4

4 回答 4

3

您正在使用直接事件处理程序。当您调用$(".user").on("click",function() {时，事件处理程序将附加到您的元素。稍后，当您将类更改为 时red，事件处理程序已附加并且仍将触发。在您的情况下，您可以尝试委托事件处理程序：

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

另一方面，委托的事件处理程序是动态评估的，因为事件处理程序不是直接附加到元素上，而是附加到容器上。

于 2013-10-20T10:56:12.017 回答
2

您必须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-20T11:04:37.260 回答
2

尝试这个：

$(".user","#container").on("click",function() {});
于 2013-10-20T11:18:15.967 回答
1

您可以尝试使用委托事件。但是如果您想使用.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-20T11:06:00.207 回答