How to get around the event bubble using jQuery's: .live()

Question

Hi there.

Here is the code in question:

$(".navItems>ul>li").live('click', function() {
  var selectorID = $(this).attr('id');
  $(".infoList").slideUp('fast', function(){
    switchTabInfo(selectorID);
  });
  function switchTabInfo(selectorID){
    var actionID = selectorID.substring(4);
    actionID = "#" + actionID;
    $(actionID).slideDown();
  }
})

So in short i have a these .infoList classes with id names tied to back to the nav li id. That lists item's id might be nav_testsHistory for example. With all the content boxes hidden by class name this javascript makes a pleasing slide up, down effect.

But the third content box flickers as will the second one after a third box push. It slides up and down a second unnecessary time.

If I add an alert like this:

$(".navItems>ul>li").live('click', function(){
  var selectorID = $(this).attr('id');
  $(".infoList").slideUp('fast', function(){
  switchTabInfo(selectorID);
  alert('bubble');
});

The alert fires 3 times?!

So my research took to reading about the event bubble. What I cannot find is how to check if it has been fired. I have not tried setting an input val and doing a tf test around the nested slider action. Cause that's crude.

More info, all the code above is in a function, which is in an init() function, which is called on document ready. That's the only js file besides jquery 1.3.2.

What do you guys think?

Answer 1

I don't think your problem is bubbling, but in your selector. You're selecting by class, so all the classes will run that animation (all 3, which is why you get 3 alerts).

I think in this case:

$(".infoList").slideUp('fast', function(){
  switchTabInfo(selectorID);
});

What you may want is this:

$(".infoList:visible").slideUp('fast', function(){
  switchTabInfo(selectorID);
});

Currently you're selecting all class="infoList" and sliding them up, if you just want to hide the one that's visible, add the :visible selector. A .stop() would also eliminate some queue issues, like this overall:

$(".navItems>ul>li").live('click', function() {
  var selectorID = $(this).attr('id');
  $(".infoList:visible").slideUp('fast', function(){
    $("#" + selectorID.substring(4)).stop().slideDown();
    switchTabInfo(selectorID);
  });
})

Answer 2

$(".infoList") is not bound to any context so it is possible that in other li elements you have those as well and you fire slideUp for all.

You might want to change it to:

$(".infoList", this).slideUp...