jquery event help

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

This might work:

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

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

Using the not selector.

Answer 2

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();
});

Answer 3

I'm not sure why you want to use a div as a close click event, are you okay to use an input button instead?

<div id="container">
       <input type="button" id="close" value="Close"/>
</div>

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

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

Answer 4

Ok so the method that worked was under the closeTabs() function I did return false; and that seemed to fix it