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_container
就some_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()绑定它们。 它会将事件处理程序附加到与选择器匹配的任何元素,即使它尚未存在于页面上。