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

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开发者_JAVA技巧 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

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