适用于稍后插入的元素的钩子答案

【问题标题】：Hook that applies to elements inserted later适用于稍后插入的元素的钩子
【发布时间】：2013-05-13 22:35:56
【问题描述】：

JavaScript/jQuery 选择器上的函数适用于在读取函数之前页面上的元素。例如，

$('.foo').css('color', 'red');

适用于读取这部分代码时类foo的元素，但不适用于后来通过append()等JavaScript/jQuery函数插入的元素。有没有办法定义插入元素时自动应用的钩子？

【问题讨论】：

【解决方案1】：

使用$('.foo') 作为您的选择器将匹配所有具有foo 类的元素，无论它们是否在加载后添加。

对于活动： .live() 已从较新版本的 jQuery 中删除，因此您应该使用 .on()。这是一个例子：

$(document).on('click', '.foo', function(){
    // click event code here
});

此事件将在页面加载时匹配.foo 元素以及通过.append()、.html() 等加载的任何元素。

更新：

我想我现在明白你的意思了。有一个名为Live Query 的插件应该可以解决您的问题。只需包含它然后使用：

$('.foo').livequery(function() { 
    $(this).css('color', 'red');
});

这是一个工作演示：http://jsfiddle.net/5jJAE/

【讨论】：

【解决方案2】：

我不确定我是否完全理解你的问题，但让我试着回答一下。

动态元素很重要！

当您在 JQuery 选择器上调用方法时，它会应用于 DOM 中与您的选择器条件匹配的所有对象。

为了清楚起见，这包括动态添加的元素。例如，采用下面的“隐藏”方法，应用于动态插入的元素。

$('body').append('<h1 id="test" style="display:none;">HI!</h1>');
$('#test').show();

所以，并不是说 JQuery 不适用于动态插入的元素，但是它只是不适用于尚不存在的元素。换句话说，它不适用于在您调用之后添加的任何元素。

不过，JQuery 确实有一个名为“live()”的聪明小方法，它可能适用于您的需求。

描述：为现在和将来匹配当前选择器的所有元素附加一个事件处理程序。

live() 的替换是on()。然而 on() 的工作方式与 live() 不同，要使其适用于未来元素，您必须在未来元素的 PARENT 元素中放置一个“on”事件处理程序。

有关更多详细信息，请参阅此答案：Turning live() into on() in jQuery

【讨论】：