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

Posted by Nick on Stack Overflow See other posts from Stack Overflow or by Nick
Published on 2010-03-20T00:49:05Z Indexed on 2010/03/20 0:51 UTC
Read the original article Hit count: 351

Filed under:
|
|
|
|

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?

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about JavaScript