如何使每个函数与动态添加的元素一起工作？ [复制]

Question

我有这个脚本，我想让它与数据库中动态添加的元素一起工作：

$( ".select-song li" ).each(
function( intIndex ){
    $( this ).bind (
        "click",
        function(){
          if($(this).hasClass('checked')){
           $(this).removeClass('checked');
          }
          else{
            $(this).addClass('checked');
          }
        }
        );
}
);

元素是这样添加的：

$('.select-song').append('<li>sth here</li>');

我知道我应该使用 on 函数，但我不知道如何在这里实现它。

Answer 1

使用on() 委托事件：

$(".select-song").on("click", "li", function(){
    $(this).toggleClass('checked');
});

Answer 2

将活动从.select-song 委托给li：

$(".select-song").on("click", "li", function () {
    if ($(this).hasClass('checked')) {
        $(this).removeClass('checked');
    } else {
        $(this).addClass('checked');
    }
});

这样每次你在.select-song中追加一个新创建的li，事件就会绑定到它。请记住，最好从最近的非动态父级委托。例如，如果您从 body 或 document 委托，则性能将与必须传播到匹配的选择器之前的事件不同。