添加新元素后不会触发事件

Question

我有HTML列表：

<ul>

包含以下初始项：

<li>

我已将新项目动态添加到该列表中。旧项目响应非常好，但不能为同一事件触发新项目。

我根据JQuery文档使用（.on）事件来触发当前和未来的元素。但仍然没有回应。

$(".favorite-btn").on("click",function(){
    alert("Yes!");              
 });

你可以帮忙吗？

Answer 1

您需要使用事件委派将事件附加到动态添加的元素：

$("ul").on("click",'.favorite-btn',function(){
 alert("Yes!");              
});

Answer 2

您需要为动态添加的DOM元素使用事件委托，如下所示： -

$(document.body).on("click",".favorite-btn",function(){
    alert("Yes!");              
});

OR

$("ul#id").on("click",".favorite-btn",function(){
    alert("Yes!");              
});