1

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

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

适用于foo在读取这部分代码时具有类的元素，但不适用于稍后通过 JavaScript/jQuery 函数（如append()等）插入的元素。有没有办法定义一个钩子，在插入一个元素？

4

2 回答 2

2

使用$('.foo')as 您的选择器将使所有元素与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/

于 2013-05-13T22:55:50.940 回答
0

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

动态元素确实很重要！

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

需要明确的是，这包括动态添加的元素。例如，采用下面的“隐藏”方法，应用于动态插入的元素。

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

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

live() 方法

但是，JQuery 确实有一个聪明的小方法，称为“live()”，它可能适用于您的需要。

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

http://api.jquery.com/live/

更新 - 不推荐使用 live() 但可以使用 on()

live() 的替代品是on()。但是 on() 不像 live() 那样工作，并且要使其适用于未来元素，您必须在未来元素的 PARENT 元素中放置一个“on”事件处理程序。

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

于 2013-05-13T22:50:23.297 回答