javascript - 动态创建
使用 on() 附加事件的元素不起作用

Question

我在这个脚本上尝试了 2-3 个小时。它创建 ul 并将 li 添加到它。然后我尝试附加 eventListeners (click) 这将是某些功能的触发器。在我的本地尝试回调函数中，仅检索最后一个 li 值。是循环问题还是 jquery 对 .on() 有任何已知问题？

The Container ul tag below
<ul id="container">
    <li>emtyp statically created</li>
</ul>

下面是js模型js：

var xy=1;
for(xy=1; xy<10; xy++){
$("#container").append('<li id="li_'+xy+'">'+xy+'</li>');   
    $("#li_"+xy).on("click",function(){alert(xy)});
}

score 3 · Accepted Answer

您必须将事件分配给ul自身，将li元素作为参数传递：

$('ul#container').on('click', '#li_' + xy, function() { ... });

这称为事件委托。

事件委托允许我们将单个事件侦听器附加到父元素，该事件侦听器将为匹配选择器的所有后代触发，无论这些后代现在存在还是将来添加。

如果每个li元素都具有相同的click功能，则可以将该单击处理程序完全移出for循环。

作为旁注，您还可以将该var声明向下移动到您的for循环中，如下所示：

for (var xy = 1; ...; ...)

javascript - 动态创建使用 on() 附加事件的元素不起作用