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

我不确定为什么后面的代码不起作用，有人可以请我看看吗？我已经安装了一个JSfiddle来演示问题。jquery：绑定事件处理程序添加类

<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>

所以，链接本身没有类，但是在一个名为“.state_1”的“容器”DIV中。第一次单击链接时，类“state_1”将从容器中移除，并且“state_2”将添加到它的位置。（我们也将锚文本更改为“状态二”）。这一切似乎工作。

的问题是，现在的 “容器” DIV应该有类” .state_2" ，而是：

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

...从来没有触发？

任何想法？ JSfiddle：https://jsfiddle.net/m5ctkzg2/

感谢您的期待！

来源

2015-11-03 Neil Hillman

当前你正在使用的是被称为“直接”绑定，它只会附加到你的代码在进行事件绑定调用时存在于页面上的元素。

需要使用.on()委派的事件的方式，生成当元件动态地或操纵选择器（如删除和添加的类）使用Event Delegation。

常规语法

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

例

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

感谢@Rory为Fiddle

来源

2015-11-03 09:43:28 Satpal

打我给它;这里是一个固定的小提琴：https://jsfiddle.net/m5ctkzg2/1/ –

也击败了我。应该添加一个代码片段来展示它。 – Stewartside

谢谢@Satpal，我以为是这样的！值得一提的是，您必须将BOTH事件绑定器更改为.on（）事件，因为如果您只更改第二个事件绑定器，则会在第一次单击后触发。我猜测.click（）事件首先发生，然后.on（）事件在类更改后触发。也感谢** Rory McCrossan **更新的JSfiddle！ –

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

回答

相关问题