How to get around the event bubble using jQuery's: .live()
- by Nick
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?
