Question

我有一个简单的函数遍历页面，并使用.each()为每个匹配的元素添加一个CSS类。我也经常使用AJAX更新页面，并且在第一次改变事物的AJAX更新后，该功能不再适用。

代码：

$("div.col-conversation span.label-sticky").each(function () {
    $(this).closest('li').addClass('stickyhighlight');
});

我理解为什么它在第一个AJAX事件之后不起作用并尝试使用.live()或.delegate()但似乎不能绑定非事件的事物（即你只能使用这种方法绑定到点击，悬停等），因此.each()不起作用。

是否有一种简单的方法来执行此功能而不将其包含在AJAX成功回调中并且不使用像livequery这样的插件，这可能有点过分了？

Answer 1

为每个匹配项添加事件处理程序可能更好的方法是使用带有选择器参数的jQuery.on（）附加事件。它允许您执行以下操作：

$('#container').on('click', '.yourClass', function(event){ doStuff(); });

与

<div id="container">
    <span class="yourClass">...</span>
    <div class="yourClass">...</div>
    <anything class="yourClass">...</anything>
</div>

这意味着只有一个事件监听器需要处于活动状态，而不是每个项目都有一个事件。这也意味着如果向容器添加项目，则无需更新监听器。它的性能更好，更易于处理。

查看jQuery.com以了解有关.on（）的更多信息。

Answer 2

我认为这对你有用：

$('body').on('mychange','div.col-conversation span.label-sticky',function () {
   $(this).closest('li').addClass('stickyhighlight');
});

将此添加到您的ajax成功函数：

$('body').trigger('mychange');

或者如果你真的不想（或不能）修改ajax成功函数：

setInterval(function() {
   $('div.col-conversation span.label-sticky').each(function () {
       $(this).closest('li').addClass('stickyhighlight');
   });
},100);

使用AJAX轮询的jQuery .live（）和.each（）

2 个答案: