Javascript 如何使每个功能与动态添加的元素一起工作？

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

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

$（'select song'）。追加（'li>此处某物）；

---

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

使用

on（）委派事件。

：

---

将事件从

委派。选择song

至

li

：

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

---

这样，每次在

中添加新创建的
li
。选择歌曲

，事件将绑定到该歌曲。请记住，最好从最近的非动态父级委派。例如，如果您从

正文

或

文档

委派，则性能将与事件不同，事件将必须传播到匹配的选择器。

委派事件，无需为每个循环指定第二个参数。

$.toggleClass（）

。默认情况下是这样的。@Phylogenesis确实你是对的，thx<代码>例如，如果您从正文或文档中委派，则性能将不一样这对单击事件真的很重要吗？我的意思是，即使查克·诺里斯（Chuck Norris）的点击速度也不可能超过浏览器的处理速度是的，在许多事件相互作用的大型应用程序中，这确实很重要。而且，应该接收事件的元素是否在DOM树中位于较低的位置也很重要。这对于移除静态容器（例如imho）时清理事件更为重要

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