JQUERY, getting two BINDs/Clicks to play nice together?

Question

I have the following line of code:

<li id="1" class=" ">
<a href="">Parking Lot</a>
<span id="1" class="list-edit">edit</span>
</li>

I then have two binds:

$("#lists li").click(function(){.......

$(".list-edit").click(function(){.........

The problem I'm having is I need the LI to contain the EDIT span because of CSS styling reasons, I have a big blue background. But this is preventing me from binding the EDIT btn. Is there a way to get these two to play nice?

Thxs

Answer 1

You can use event.stopPropagation to prevent the click handler attached to the parent LI from firing when the edit span is clicked (if that's what you mean):

$(".list-edit").click(function(e){
    e.stopPropagation();
    // do stuff
});