javascript - 添加的类不会触发其 jQuery 函数

Question

这是一个音频播放器：这个想法是当点击播放按钮时会变成一个暂停按钮（反之亦然）。

事情是该.pause事件不会触发以下功能：

$('.pause').click(function(){
    player.pause();

    $(this).addClass('play');
    $(this).removeClass('pause');
});

css显示设置了暂停类，但该功能不起作用。有没有办法让它工作？（很高兴知道为什么它不起作用）

jsFiddle

Answer 1

使用委托的事件绑定来绑定将感知选择器的处理程序，而无需重新绑定事件。

出于演示的目的，选择器将遵循以下行：

$('.player_controls').on('click', '.pause', function () {...});

委托事件绑定将侦听器附加到父元素，该元素检查触发的事件是否在与提供的选择器匹配的元素上触发。

_{jQuery 文档}

当selector提供 a 时，事件处理程序被称为delegated。当事件直接发生在绑定元素上时，不会调用处理程序，而只会调用与选择器匹配的后代（内部元素）。jQuery 将事件从事件目标冒泡到附加处理程序的元素（即，从最里面到最外面的元素），并为沿着该路径匹配选择器的任何元素运行处理程序。

事件处理程序仅绑定到当前选定的元素；当您的代码调用.on(). 为确保元素存在并且可以被选择，请在页面 HTML 标记中的元素的文档就绪处理程序内执行事件绑定。如果将新 HTML 注入页面，请在将新 HTML 放入页面后选择元素并附加事件处理程序。或者，使用委托事件来附加事件处理程序，如下所述。

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。例如，此元素可以是模型-视图-控制器设计中视图的容器元素，或者document如果事件处理程序想要监视文档中的所有冒泡事件。在加载任何其他 HTML 之前，该document元素在head文档中可用，因此在此处附加事件是安全的，而无需等待文档准备好。

Answer 2

您可以为此使用事件委托。问题是直接绑定（没有委托）绑定到当时存在的任何元素click被调用。

$(".player_controls").on("click", ".pause", function(){

    /* ... */

});

Answer 3

而不是使用 $('.pause').click(function(){...}) 您需要开始使用 $.on 方法来开始侦听仍然不在 DOM 中的对象。例如

$(".pause").parent().on("click",".pause", function(event){
    player.pause();
    $(this).addClass('play');
    $(this).removeClass('pause');
});