Question

我正在使用一个事件替换某些图层中的“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() );
});

并且它第一次工作，但在Ajax请求之后，当$('.playOnAP')元素被替换时，它不工作。我猜我应该使用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() {

但不起作用。

Answer 1

试试这个：

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

使用事件委派时，必须将事件绑定到最初在DOM中的元素。如果动态替换了某些内容，则无法绑定到该内容。

正如Anup深刻提到的，将click事件绑定到document并不是绝对必要的 - 任何父元素都会这样做，只要它最初在DOM中。

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

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

您可以使用：

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

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

Answer 2

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

如何使用委托事件？

2 个答案: