Question

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

<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元素获取从其父级委派的事件。实际上，它会使用事件冒泡来实现此效果。

<强> See

Answer 2

尝试事件委派

替换

$('#activityPaganation li a').on("click", function(e) {

带

$(document).on("click", '#activityPaganation li a', function(e) {

由于元素是动态添加到页面的，因此事件不会绑定到添加的元素。

您正在尝试的事件签名只会将事件绑定到该时间点DOM中存在的元素taht。因此，将事件委托给最近的静态祖先将解决您的问题，因为事件会冒泡并由其处理。

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

2 个答案: