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>

所以，链接本身没有类，但是在＆＃34;容器中＃34; DIV打电话给＃34; .state_1＆＃34;。第一次点击链接时，班级＆＃34; state_1＆＃34;从容器中移除，＆＃34; state_2＆＃34;在它的位置添加。（我们还将锚文本更改为＆＃34;状态2＆＃34;）。这一切似乎都有效。

问题是，现在＆＃34;容器＆＃34; DIV应该有班级＆＃34; .state_2＆＃34;，但是：

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

......从不触发？

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

感谢您的期待！

Answer 1

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

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

一般语法

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

实施例

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

感谢@Rory Fiddle

jquery：将事件处理程序绑定到添加的类

1 个答案: