jquery绑定事件到动态加载的html元素

使用jquery，我们可以将事件处理程序附加到页面中的元素，这是在document.ready（）函数中完成的。 现在我的困难是我在下载文件后有一些元素，比如稍后加载链接等（使用ajax请求）。 所以这些新元素无法与我在页面中定义的处理程序绑定。 有没有办法知道什么时候跟着ajax查询完成然后在里面我可以绑定我的事件处理程序。

提前致谢

Answer 1

各种ajax方法接受一个回调，您可以将处理程序绑定到新元素。

您还可以将事件委派与delegate() ^[docs]方法或live() ^[docs]方法一起使用。

事件委托的概念是您不将处理程序绑定到元素本身，而是绑定到页面加载时存在的某个父容器。

事件从容器内的元素冒泡，当它到达容器时，运行选择器以查看接收事件的元素是否应该调用处理程序。

例如：

 
  some button  some button  some button  some button  some button  some button  some text  some text   

实例： http ： //jsfiddle.net/5jKzB/

因此，您将处理程序绑定到some_container ，并将选择器传递给.delegate() ，在这种情况下查找"a.link" 。

当在some_container单击与该选择器匹配的元素时，将调用该处理程序。

 $('#some_container').delegate('a.link', 'click', function() { // runs your code when an "a.link" inside of "some_container" is clicked }); 

所以你可以看到，当"a.link"元素添加到DOM时，只要在页面加载时存在some_container就some_container 。

live() ^[docs]方法是相同的，除了容器是document ，因此它处理页面上的所有点击。

 $('a.link').live('click',function() { // runs your code when any "a.link" is clicked }); 

Answer 2

然后你会想要使用.live() 。 看看http://api.jquery.com/live/ 。

例：

 $('a').live('click', function() { // Do something useful on click. }); 

在上面的示例中，任何A元素（无论是已存在还是在加载文档后加载）都将触发click事件。

Answer 3

这些答案现在已经过时，因为.live（）方法自jQuery版本1.7以来已被弃用。 对于jQuery 1.7+，您可以使用.on（）将事件处理程序附加到父元素

Answer 4

使用.live（）绑定它们。 它会将事件处理程序附加到与选择器匹配的任何元素，即使它尚未存在于页面上。