Question

我在JQuery插件中有这个代码片段：

function addToPlayList() {
    $('.playOnAP').on('click',function() {
    console.log('play!!');
    if( supports_mp3_audio() ) {
        console.log('soporta mp3');
        $('#mp3-list ul li',this).each( function( index, element ) {

            $('.total-title').eq(index).attr('src', $(this).text() );
            });     
    } else if ( supports_ogg_audio() ) {

        console.log('soporta ogg');
        $('#ogg-list ul li',this).each( function( index, element ) {

            $('.total-title').eq(index).attr('src', $(this).text() );
            });     
    }
    console.log($('.total-title').first().attr('src'));
    songPlay($('.total-title').first().attr('src'));
    htmlSound.play(); 
    $('.total-play').addClass('total-pause');

    });
}
addToPlayList();

我第一次加载页面时有效。但是在Ajax请求之后，我获得了新的$('.playOnAP')元素，并且不再触发该事件。

所有其他插件的功能都正常，但上面的功能。有什么想法吗？

修改

终于找到了这个答案：How to use delegated events?

Answer 1

我在您发布的代码中没有看到AJAX函数。但是，如果在执行AJAX函数后替换.playOnAP，我建议使用delegated events。您可以通过将函数绑定到最近的 static 元素来完成此操作。

HTML：

<div id="container">
  <div class="item">A</div>
  <div class="item">B</div>
</div>

JS：

$('#container').on('click', '.item', function() {
    $(this).replaceWith('<div class="item">New Item ' + (new Date().getTime()) + '</div>');
});

替换事件的元素后，Ajax事件不起作用

1 个答案: