jquery：绑定事件处理程序以添加 class

Question

我不确定为什么下面的代码不起作用，有人可以帮我看看吗？我设置了一些 JSfiddle 来演示这个问题。

<div class="wrapper">
    <div class="state_1">
        <a href="#">state one</a>
    </div>
</div>

<script>
$('.state_1 a').click(function(){
    $(this).parent().removeClass('state_1').addClass('state_2');
    $(this).html('state two');
});

/* SECOND CLICK: NEVER TRIGGERS? */
$('.state_2 a').click(function(){
    alert("clicked!");
});
</script>

所以，link本身没有class，而是在一个叫做“.state_1”的"container"DIV中。第一次单击 link 时，将从容器中删除 class "state_1"，并在其位置添加 "state_2"。（我们还将锚文本更改为 "state two"）。这一切似乎都有效。

问题是，现在 "container" DIV 应该有 class ".state_2"，但是：

$('.state_2 a').click();

...从不触发？

有什么想法吗？ JSfiddle：https://jsfiddle.net/m5ctkzg2/

感谢观看！

Answer 1

目前您使用的是 "direct" 绑定，它只会附加到您的代码进行事件绑定调用时页面上存在的元素。

在动态生成元素或操作选择器（如删除和添加类）时，您需要使用Event Delegation using .on()委托事件方法。

一般语法

$(document).on('event','selector',callback_function)

例子

$('.wrapper').on('click', ".state_2 a", function(){
    //Your code
});

感谢@Rory Fiddle

jquery：绑定事件处理程序以添加 class

jquery: Binding event handler to added class

jquery

html

binding

onclick

addclass