jquery - multiple actions need to be perform in single selector -

the case :

i've list items manipulate css selected 1 apply 'selected effect'. example once specified li clicked, run code :

    $(document).on( 'click', 'li', function (){           $('li').removeclass('selected');       $(this).addclass('selected'); }); 

but on li, needs perform other action because have link inside li:

<li class="selected"><a href="#"><span class="items">item 1</span></a><a href="#"><span class="edit">edit</span></a></li> 

my question :

how avoid call click function when click on other links (for example 'edit' above)? because intention not select li..

i thought of inside click function, can put 'if expression' when not edit link clicked, proceed..

but if better way..

how avoid call click function when click on other links (for example 'edit' above)?

in handler "edit" link, use event.stoppropagation() prevent bubbling li.

since you're using delegation, can this: live example | live source

$(document).on('click', '.edit', function(event) {     $("<p>do edit...</p>").appendto(document.body);     event.stoppropagation();             // <=== important bit }).on('click', 'li', function (){     $('li').removeclass('selected');     $(this).addclass('selected');     return false; }); 

(i added return false second 1 because links in lis causing page jump.)