javascript - Jquery 更改类单击不起作用

Question

我有那些点击更改类(class)时使用的代码

$(document).ready(function(){
    $("div.add").click(function(e){
    $.ajax({url: "?action=add&postid=" + $(this).parents('div.box').first().attr("id")})
    $(this).removeClass('add').addClass('remove');
    });
});
$(document).ready(function(){
    $("div.remove").click(function(e){
    $.ajax({url: "?action=remove&postid=" + $(this).parents('div.box').first().attr("id")})
    $(this).removeClass('remove').addClass('add');
    });
});

当我第一次单击时，div 类从 <div class="add"> 更改至 <div class="remove">并且 ajax url 有效，但是当我从更改后的类中再次单击时，没有任何反应。 (它不会变回添加类)

Answer 1

如果在附加事件处理程序时要监听事件的元素尚不存在，则最好使用 .on 方法附加事件处理程序。在您的情况下，您可以这样做:

$(document).on('click', '.add', function() { ... });
$(document).on('click', '.remove', function() { ... });

这称为事件委托(delegate)，它(以我自己的理解)将事件处理程序附加到 DOM 树上方的元素，一旦页面加载，该元素肯定存在。事件将在 DOM 树中向上冒泡(除非被阻止)，执行它们经过的元素中的所有事件处理程序。