使用on（）动态创建<li>元素事件无法正常工作</li>

Question

我在这个剧本上试了2-3个小时。它创建ul并附加li。然后我尝试附加eventListeners（单击），这将是一些功能的触发器。 在我的本地尝试回调函数只检索最后的li值。它是一个循环问题还是jquery与.on（）有任何已知问题？

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

以下是js model 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)});
}

http://jsfiddle.net/caglaror/c8jg6f8y/1/

Answer 1

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

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

这称为 event delegation 。

  

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

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

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

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