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

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 。您可以通过将函数绑定(bind)到最近的静态元素来实现此目的。

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>');
});