Load each div with a delay in jquery

Question

I have the following code, which filters/ displays certain divs according to their corresponding number. For example clicking the 'onestar' link will only display divs with 'onestar' in the class name. This works fine when the page is first loaded. But suppose I request some new markup via post in JQuery, the link filters stop working. For some reason, the filters stop working when the new markup is retrieved by JQuery Ajax. Thanks

This is the code that does the js filtering

$('#filtero-stars li a').click(function(){
   $('#filtero-stars li').removeClass('active');
   $(this).parent().addClass('active');
   var colorClass = '.' + $(this).attr('class');
   if(colorClass=='.all') {
    $('#nothing_found').remove();
    $wall.children('.invis').toggleClass('invis').fadeIn(500);
   } else {  
    if ($wall.children(colorClass).length == 0) {
     $('#demo .wrap').append(getNothingFound()).fadeIn(500);
     setTimeout(function(){$('#nothing_found').show();},600);
    } else $('#nothing_found').remove();
    $wall.children().not(colorClass).not('.invis').toggleClass('invis').fadeOut(500);
    $wall.children(colorClass+'.invis').toggleClass('invis').fadeIn(500);
   }
});

this is the HTML markup for the filter

<ul class="star-rating" id="filter0-stars">
  <li><a href="#onestar" class="onestar">
    <div class="one"></div>
    <span>1 Star</span></a></li>
  <li><a href="#twostar" class="twostar">
    <div class="two"></div>
    <span>2 Stars</span></a></li>
  <li><a href="#threestar" class="threestar">
    <div class="three"></div>
    <span>3 Stars</span></a></li>
  <li><a href="#fourstar" class="fourstar">
    <div class="four"></div>
    <span>4 Stars</span></a></li>
  <li><a href="#fivestar" class="fivestar">
    <div class="five"></div>
    <span>5 Stars</span></a></li>
  <li><a class="all" href="#">Show all</a></li>
</ul>

this is the content which is filtered

<div id="demo">
  <div class="box threestar">
  <div class="box twostar">
  <div class="box onestar">
</div>

This is the code that retrieves the new mark up, after which the filters don't work $.post('get-offers.php', $("#offerForm").serialize(), function(data) {

$('#demo').html(data);

Please format your code properly with 4 spaces before each new line in the code segments. — thenetimp, Feb 04 '12 at 18:56
possible duplicate? - http://stackoverflow.com/questions/6892755/load-div-then-delay-load-next-in-jquery — apnerve, Feb 04 '12 at 19:01

jfriend00 · Answer 1 · 2012-02-04T19:22:43.803

When you replace the content, all event handlers on those objects are gone. They were attached to the specific elements in the previous HTML. When you replace that HTML, the event handlers will not be on the new DOM elements.

You can use delegated event handling in jQuery to attach your event handlers to a constant parent object that does not get get replaced.

If the event handler that stops working is the one in the code you've included (I can't tell for sure from the partial HTML/JS you've included), then you can do that by changing this:

$('#filtero-stars li a').click(function(){

to this:

$(document).on('click', '#filtero-stars li a', function(){

Ideally, you wouldn't attach this event handler to the document object, but rather on a parent that is closer to the actual objects, a parent that doesn't change when you load new HTML (so the event handler doesn't get deleted). But, since you haven't included enough of your HTML, I don't know which parent to advise hooking it to.

P.S. .on() was added to jQuery 1.7. For earlier versions, you want to use .delegate() which does something similar (though the arguments are in a slightly different order).

See here for documentation on how .on() works.

Load each div with a delay in jquery

1 Answers1