如何使用委托事件？答案

【问题标题】：How to use delegated events?如何使用委托事件？
【发布时间】：2014-01-02 20:23:18
【问题描述】：

我正在使用事件来替换某些层中的“src”属性（<div class="total-title" src="anURL">）：

$('.playOnAP').on('click',function() {
    $('#mp3-list ul li',this).each( function( index, element ) {
    $('.total-title').eq(index).attr('src', $(this).text() );
});

当$('.playOnAP') 元素被替换时，它第一次工作，但不是在Ajax 请求之后。我猜我应该使用Delegated Events，但不要让自己说清楚。

我尝试了下一个：

$('.playOnAP').on('click','#mp3-list ul li',function() {
$('.playOnAP #mp3-list ul li').on('click',function() {
$('.playOnAP #mp3-list ul li').on('click','#mp3-list ul li',function() {

但不起作用。

【问题讨论】：

您是替换元素 .playOnAp 本身还是仅替换其内容？
@PSL - 整个元素
然后做$('parentOfplayOnAPOrdocument').on('click','.playOnAP #mp3-list ul li',function() { 基本上你想将事件绑定到DOM中存在的容器元素，只要你需要事件。
-> learn.jquery.com/events/event-delegation <-

标签： javascript delegates jquery

【解决方案1】：

试试这个：

$(document).on('click', '.playOnAP',function() {

使用事件委托时，您必须将事件绑定到最初位于 DOM 中的元素。如果某些内容已被动态替换，则无法绑定。

正如 Anup 有见地提到的那样，将点击事件绑定到 document 并不是绝对必要的——任何父元素都可以，只要它最初位于 DOM 中。

例如，如果.playOnAP 是被替换的最顶层容器元素：

<div id="someDiv">
    <div class="playOnAP">
        //some stuff here
    </div>
</div>

你可以使用：

$('#someDiv').on('click', '.playOnAP', function() { //do your stuff });

不过，默认情况下，您几乎可以始终使用 $(document).on()（即使只是在缩小到最合适的元素之前快速检查以确保一切正常）。

【讨论】：

为什么 OP 应该尝试这个？请说明问题和您的解决方案。
@gibberish：尝试在其最近的父级上添加事件，而不是 $(document)... $("its-closest-parent").on("click" ".playOnAP.." , 函数() {..})
是的，它在编辑后工作。谢谢。这么快 :) 标记为已回答为时过早 xD

【解决方案2】：

如果要替换 .playOnAp，则需要将委托放在 .playOnAp 的父级上。事件处理程序仅附加到添加事件处理程序时存在的 DOM 元素。

【讨论】：