带有 AJAX 轮询的 jQuery .live() 和 .each()答案

【问题标题】：jQuery .live() and .each() with AJAX polling带有 AJAX 轮询的 jQuery .live() 和 .each()
【发布时间】：2013-02-12 17:08:12
【问题描述】：

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

代码：

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

我明白为什么它在第一个 AJAX 事件之后不起作用并尝试使用 .live() 或 .delegate() 但似乎你不能绑定不是事件的东西（即你只能使用此方法绑定到单击、悬停等），因此.each() 不起作用。

有没有一种简单的方法来执行这个函数，而不将它包含在 AJAX 成功回调中，并且不使用像 livequery 这样的插件，这可能是矫枉过正？

【问题讨论】：

什么时候调用调用.each的函数？
live is dead as it can be...
我认为@ExplosionPills 是在正确的轨道上。在新内容加载到页面后，您不会调用该函数来添加类。
回答第一个问题...在$(document).ready() 调用之前。我知道live() 已被弃用。

标签： javascript ajax jquery each

【解决方案1】：

我认为这对你有用：

$('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 事件后保持项目突出显示？
虽然将.trigger() 添加到 ajax 成功函数中并不比将原始函数复制/粘贴到 ajax 成功函数中要好很多？我想是的。

【解决方案2】：

可能比为每个匹配项附加事件处理程序更好的是使用带有选择器参数的 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() 的更多信息。

【讨论】：

看来我确实需要查看on()