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

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 委托，则性能将不同，因为事件必须传播到匹配的选择器。

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

How to make each fuction work with dynamically added elements?

javascript

each

jquery

click