Jquery trigger problem

Question

I have two DIV elements. HTML looks like this:

<div id="first"><div id="second"></div></div>

The CSS for this elemets are:

#first{ float:left; width:656px; border-bottom:1px solid #CCC; padding-top:5px; display:block; cursor:pointer;}
#second{ float: right; margin-right:10px;  border:1px solid #9F0; width:230px; height:14px; background-color:#FF0; display: none;}

Jquery code:

$(document).ready(function(){
    $("#first").click(function(event) {
        $("#third").load('index.php');
    });
});

$("#first").live('mouseover', function() {       
    $("div#second").show();
});

$("#second").live('click', function() {       
    $("#fourth").load('somepage.php');
});

The thing that I want to do is when the mouseover on first DIV trigger the function and the second DIV show up inside the first DIV the user can click on the second DIV and open the "somepage.php". Using this code the Jquery function for second DIV is covered by CSS display block of the first DIV and both of the Jquery are triggered.

How can I suspend Jquery click function of the first DIV when the second DIV function is fired?

Answer 1

You can use unbind:

$("#first").unbind("mouseover");

I think that works, although check the jquery documentation: http://docs.jquery.com/Events/unbind

Answer 2

If you don't use live (i.e. use click/bind instead) for the second click handler then you can just return false from the handler or call event.stopPropagation().

Another solution is to do a check in the first div click handler on event.target.id to see what was clicked on.