javascript - 单击问题 : Dynamically Generated Links Not Triggering Click Function

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

您可以使用事件委托(delegate)，因为这是动态添加到 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);
        });

否则将您的事件绑定(bind)移动到加载的 complete 回调。

即

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

            alert(pid);
    });
});

原因是在 DOM 中需要存在的元素上使用直接事件绑定(bind)，解决方法是将事件委托(delegate)给 DOM 中任何点或文档头中存在的容器，以便将来添加 when 元素获取从其父级委托(delegate)的事件。它有效地使用了事件冒泡来实现这种效果。

See