动态加载的html时间绑定,jQuery将事件绑定到动态加载的html元素

使用jquery，我们可以将事件处理程序附加到页面中存在的元素上，这是在document.ready()函数内部完成的。 现在我的困难是在下载文档后，稍后(使用ajax请求)加载了链接等某些元素。 因此，这些新元素无法与我在页面中定义的处理程序绑定。 有什么方法可以知道何时完成后续的ajax查询，然后在其中绑定我的事件处理程序。

提前致谢

各种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存在。

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

$('a.link').live('click',function() {

// runs your code when any"a.link" is clicked

});

从您所说的来看，在执行方面，似乎使用proxy()似乎会更快，因为它不会绑定到所有点击。那是对的吗？

@Aaron：如果您的意思是比.live()快，请说是。传递给delegate调用的选择器仅需要针对指定容器中发生的事件运行。我从不使用.live()。

是的，那就是我的意思。谢谢，我一直在使用live()，但是直到现在为止我还没有了解到委托()方法及其好处。

.live()自1.7起已弃用，而1.9中已将其删除，因此请确保立即使用.on()！

为了补充Bashevis所说的内容，从jQuery 3.0开始不推荐使用.delegate()方法，因此，希望移植到该版本时，我建议也切换到on()事件：api.jquery.com/在$(＃someAncestorElement).on(.elementThatWillExistLater，eventName，function(){...})上；

糟糕，我在上面的注释中翻转了选择器和事件的顺序。应该是$(＃someAncestorElement).on(eventName，.elementsThatWillExistLater，function(){...});

然后，您将要使用.live()。看看http://api.jquery.com/live/。

例：

$('a').live('click', function() {

// Do something useful on click.

});

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

仅供参考，现在不推荐使用live

赞成使用.on。因此，在此示例中，您将使用$(a).on(click，function(){//对click做一些有用的操作。});

由于jQuery 1.7版以来不赞成使用.live()方法，因此这些答案现在已过时。对于jQuery 1.7+，您可以使用.on()将事件处理程序附加到父元素

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