单击问题:动态生成的链接未触发单击功能

Question

下面是代码的两个片段,由于某种原因没有发生任何事情,但是同一个JS文件中的其他jQuery函数在UL页面上正常运行,是否正在盯着我看？

<ul id="activityPaganation" class="paganation">
    <li>1</li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
</ul>



$(document).ready(function() { 
    $('#activityPaganation li a').on("click", function(e) {
            e.preventDefault();     
            var pid = $(this).text();

            alert(pid);
    });
});

Answer 1

您可以使用事件委派,因为它会动态添加到DOM.

 $(document).on("click", "#activityPaganation li a", function(e) {
            e.preventDefault();     
            var pid = $(this).text();

            alert(pid);
    });

而不是文档使用在任何时间点存在于DOM中的一些容器.

如果已添加li并且您随时ul #activityPaganation存在,则:

  $('#activityPaganation').on("click", "li a", function(e) {
                e.preventDefault();     
                var pid = $(this).text();

                alert(pid);
        });

否则将事件绑定移动到负载的complete回调.

即

$('something').load('someurl', function(){
 $('#activityPaganation li a').on("click", function(e) {
            e.preventDefault();     
            var pid = $(this).text();

            alert(pid);
    });
});

原因是,对于元素的直接事件绑定,它需要存在于DOM中,而不是解决方法是将事件委托给任何点或文档头部中存在于DOM中的容器,以便将来添加when元素时获取事件从其父母那里委托.实际上,它使用事件冒泡来实现此效果.

看到