带有AJAX轮询的jQuery .live（）和.each（）

Question

I have a simple function that goes through the page and adds a CSS class to each element that matches, using .each() . I'm also constantly updating the page with AJAX, and after the first AJAX update that changes things, the function no longer applies.

Code:

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

I understand why it doesn't work after the first AJAX event and went to try to use .live() or .delegate() but it doesn't appear that you can bind things that aren't events (ie you can only bind to click, hover etc.) using this method, so .each() isn't going to work.

Is there a simple way to execute this function without including it in the AJAX success callback and without using a plugin like livequery, which is probably overkill?

Answer 1

What's probably better than attaching an event handler for each matching item is to attach an event with jQuery.on() with a selector parameter. It allows you to do something like:

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

with

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

This means that only one event listener needs to be active instead of one event per item with the class. It also means that if you add items to the container, you won't need to update the listener. It's better performance and easier to deal with.

Check jQuery.com for more about .on().

Answer 2

I think this will work for you:

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

Add this to your ajax success function:

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

OR if you really don't want to (or can't) modify the ajax success function:

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