可能的jQuery bug -事件仍然在改变Class元素时被触发

Question

昨天我在这段代码中发现了jQuery的一个潜在错误:

$(document).ready(function() {
    $('.likedLink').click(function(){
        return false; 
    });

    $('.likes').click(function(){
        var id = $(this).attr('id');
        var currentLike = id;
        id = id.replace('p','');

        $.ajax({
            type: "POST",
            url: "/posts/like",
            data: "id=" + id,
            success: function(like){
                $('#' + currentLike).html(like).removeClass('likes').addClass('likedLink');
            }
        });

        return false;
    });
});

post接收回一个数字，并将当前点击的链接的HTML设置为新值。然后更改元素上的类，以避免进一步单击/ajax。

现在，代码工作了，它收到了新的HTML，甚至正确地更改了类，但是当用户/我单击它时，AJAX事件仍然被触发，但是它是一个不同的类，所以它不应该被触发!

有什么想法吗，或者这是jQuery的一个bug ?

顺便说一下，我通过将.html()更改为.replaceWith("<p>" + like + "</p>")来修复代码，但我很好奇这是如何发生的

Answer 1

这不是一个bug!

选择器只在创建时才计算。以后更改类名不会解除事件的绑定。

你必须解除它的绑定:

$.ajax({
    type: "POST",
    url: "/posts/like",
    data: "id=" + id,
    success: function(like){
        $('#' + currentLike).html(like).unbind('click');
    }
});

不需要修改类名

Answer 2

当您使用click (bind("click", handler);的快捷方式)时，它将处理程序附加到元素本身，因此更改类或父类不会影响处理程序。您可以尝试$(".likes").live("click, handler);，它只会在元素仍然具有

Answer 3

您需要使用live()或delegate()来代替click()。click()函数只分配一次事件，不检查事件是否发生了变化。