Question

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

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

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

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

css显示设置了pause类，但该函数不起作用。有没有办法让它发挥作用？（很高兴知道它为什么不起作用）

jsFiddle

Answer 1

使用delegated event binding绑定一个可以选择器感知的处理程序，而无需重新绑定事件。

出于演示目的，选择器将沿着以下行：

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

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

_{jQuery docs}

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

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

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

Answer 2

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

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

    /* ... */

});

Answer 3

而不是使用$（'。pause'）。单击（function（）{...}），您需要开始使用$ .on方法开始侦听仍然不在DOM中的对象。例如

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

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

jsFiddle

3 个答案: