Question

我有这个脚本，我想使用数据库中的dinamically添加元素：

$( ".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>');

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

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

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

如何使用动态添加的元素使每个功能工作？

2 个答案: