Click Issue：动态生成的链接不触发Click功能

下面是两段代码，由于某种原因没有发生任何事情，但来自同一个JS文件的其他jQuery函数在UL页面上执行得很好，这是什么那是在盯着我！Click Issue：动态生成的链接不触发Click功能

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

来源

2013-07-10 llanato

你是否有机会将这些动态添加到DOM，或者你确定你没有重复该ID？ – PSL

[似乎正在为我工作]（http://codepen.io/brigand/pen/aJuHj）。 – FakeRainBrigand

@PSL是的，有通过jquery load（）加载（） – llanato

您可以使用事件委托，因为这是动态添加到DOM。

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

      alert(pid); 
    });

而不是文档在任何时间点使用DOM中存在的某个容器。

如果李的加入和你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

来源

2013-07-10 21:40:18 PSL

@acdcjunior谢谢！ :) – PSL

尝试事件代表团代替

更换

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

与

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

因为元素正在被动态添加到页面，事件不会绑定到添加的元素。

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

来源

2013-07-10 21:40:21

Click Issue：动态生成的链接不触发Click功能

回答

相关问题