jQuery.binding 用 jQuery.load 加载的东西答案

【问题标题】：jQuery.bind'ing things loaded with jQuery.loadjQuery.binding 用 jQuery.load 加载的东西
【发布时间】：2012-03-20 21:29:27
【问题描述】：

当使用jQuery.load 将 HTML 内容动态加载到网页中时，“重新绑定”任何处理程序的最佳方法是什么？

通常您在jQuery.ready 中绑定处理程序，但它们显然不适用于新加载的内容。这适用于在加载内容的外部和内部使用的处理程序，因此仅将它们绑定在 load 成功函数中并不是很好。

【问题讨论】：

不要绑定任何新的事件处理程序。查看event delegation 上的文档。

标签： javascript jquery jquery-load

【解决方案1】：

订阅这些处理程序时，您可以使用 .on 函数，它允许您订阅甚至不存在的 DOM 元素，并且在添加它们时订阅将完成。 .on 函数是在 jQuery 1.7 中引入的。如果您使用的是旧版本，您可以使用 .delegate 函数来实现与 jQuery 1.4.2 中引入的相同效果。如果您使用的是更旧的版本，您可以使用.live 方法。

这是一个示例，说明如何订阅某些元素的点击事件（现有的或尚不存在的，将来会添加）：

$('#someParentElement').on('click', '#someElement', function() {

});

【讨论】：

小附录：如果不是在$(document) 上调用它，而是使用最近的非动态父级，您将获得更好的性能。

【解决方案2】：

您需要将新内容的事件委托给静态父元素，例如：

$("#myDiv").load(myUrl);

$("#myDiv").on('click', '#myElement', function() {
    // do stuff when #myElement (which was part of the HTML 
    // returned in the load() call) is clicked.
})

这里假设您使用的是 jQuery 1.7+，如果没有，请使用 delegate():

$("#myDiv").delegate('#myElement', 'click', function() {
    // do stuff when #myElement (which was part of the HTML 
    // returned in the load() call) is clicked.
})

【讨论】：