在JQuery切换类上添加事件

Question

我的标记：

<ul id="playerControls">
    <li class="play-bt"></li>
</ul>

如果按下播放按钮，我会触发此事件：

$(".play-bt").bind('click',function(){
    $(this).toggleClass('pause-bt');
});

现在我假设play-bt班级名称已更改为pause-bt，但是为什么会这样：

$(".pause-bt").bind('click',function(){
    console.log('PEW');
});

没被解雇？

Answer 1

  

现在我假设.play-bt类名已更改为   暂停-BT。

toggleClass不能那样工作。

toggleClass是addClass和removeClass的组合。

toggleClass将检查指定的类是否存在。

• 如果是，则将其从元素中删除。
• 如果没有，则将其添加到元素中。

---

关于您的活动未触发的原因，这是因为您必须在分配课程pause-bt之前绑定该点击事件。

bind()搜索与选择器匹配的所有元素，在当前点，并将该函数分配给事件处理程序。

您需要重新绑定此活动，或使用live()代替bind()

live()：

  

为与当前匹配的所有元素附加事件处理程序   选择器，现在和将来。

http://api.jquery.com/live/

Answer 2

.bind()仅捕获当时存在的元素。由于您的元素最初没有该类，因此它没有绑定。根据您的jQuery版本，您需要.live()或.on()。

Answer 3

因为当你设定绑定时，你所针对的元素没有那个类。使用jQuery .on（）函数并绑定到容器，如下所示：

$('#playerControls').on('click', '.pause-bt', function(){
      console.log('PEW');
});

该事件将在#playerControls上触发，此时它将然后寻找.paust-bt