Question

I have a setup like this:

    <div id="container">
       <div id="close">Close</div>
    </div>

Then in my jquery I have this:

$("#container").live("click",function(){
   changeTabs();
});

$("#close").live("click", function(){
   closeTabs();
});

The problem with that is that when you click the close div it fires both events. I am guessing it is because the second div overlays the first one. So how can I cancel or stop the first event from firing?

Answer 1

Check out event.stopPropagation()

From the jQuery docs:

Stops the bubbling of an event to
parent elements, preventing any parent
handlers from being notified of the
event.

In your case, this might look like

$("#close").live("click", function(evt){
   evt.stopPropagation();
   closeTabs();
});