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

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

提前致谢

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

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

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

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

例如:

  

实例: 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_containersome_container

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

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

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

例:

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

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

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

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