2

Below are the two snippets of code, for some reason nothing is happening, yet other jQuery functions from the same JS file are executing fine on the page with the UL, is it something that's staring me in the face!?

<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);
    });
});
4

2 回答 2

8

您可以使用事件委托，因为这是动态添加到 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回调。

IE

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

            alert(pid);
    });
});

原因是直接事件绑定到需要存在于 DOM 中的元素上，解决方法是将事件委托给 DOM 中任意点或文档头中存在的容器，以便将来添加元素时它会获取事件从其父级委托。实际上，它使用事件冒泡来实现此效果。

看

于 2013-07-10T21:40:18.673 回答
3

改为尝试事件委托

代替

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

和

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

因为元素是动态添加到页面的，所以事件不会绑定到添加的元素。

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

于 2013-07-10T21:40:21.577 回答