javascript - 定义类的 .click - 在元素具有类之前

Question

我有以下代码:

$('.fam.page_edit').click(function(event){
    event.preventDefault();
    $(this).removeClass('page_edit').addClass("accept");
    $(this).parent().parent().removeClass("ikkeskrevet").addClass("kaldt");
});

$('.fam.accept').click(function(event){
    event.preventDefault();
    $(this).removeClass('accept').addClass("add");
    alert("Debug 1.");
    $(this).parent().parent().removeClass("kaldt").addClass("skrevet");

});

第一部分工作正常。
类(class)改变了，我认为那里没有问题。虽然。当我第二次尝试单击它时。类(class)变更后。
没有反应。 “调试 1”没有弹出，firebug 中没有控制台错误。什么都没有。

Answer 1

当您动态添加类时，应该委托(delegate)事件，否则由于在页面加载时没有带有 .fam.accept classNames 的元素，jQuery 无法找到/选择该元素。

$(document).on('click', '.fam.accept', function(event){
   // ...
});

请注意，事件绑定(bind)到元素而不是它们的类名，因此即使您删除了 page_edit 类名，也会执行第一个点击处理程序。如果你只改变classNames，你可以使用.toggleClass()方法代替。

$('.fam.page_edit').click(function(event){
    event.preventDefault();
    $(this).toggleClass('page_edit accept');
    // ...
});