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;

    });

});

帖子收到一个号码，并将当前点击链接的HTML设置为新值。然后我更改元素上的类以避免进一步单击/ AJAX-ing。

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

任何想法，或者这是jQuery的错误？

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

Answer 1

这不是错误！

您的选择器仅在您创建它时进行评估。稍后更改班级名称不会取消绑定该事件。

你必须解开它：

$.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（）函数分配事件一次，不检查它们是否发生了变化。

可能的jQuery bug - 事件仍在被更改的Class元素上触发

3 个答案: