javascript - Multiple clicks on a button issue using jquery -

javascript - Multiple clicks on a button issue using jquery -

i have next html.i have implemented next jquery code delete button clicking 2 times.basically 1 edit , 1 delete.when click on edit 1 click happens when click on delete , first delete button trigers edit.how can avoid this.please check code.

$(".tools").live("click", function(e){ e.preventdefault(); alert('clicked on edit'); var n = $("a", this).attr('id'); alert(n); }); $(".tools").find('span').live("click", function(e){ e.preventdefault(); alert('clicked on delete'); var n = $("a", this).attr('id'); alert(n); }); <div class="tools"> <a href="#" class="btn acebtn btn-minier btn-info" id="edit_'."$count".'"> <i class="icon-only ace-icon fa fa-share"></i> </a> <span class="dlt"> <a href="#" class="btn acebtn btn-minier btn-info dlt" id="delete_'."$count".'"> <i class="icon-only ace-icon fa fa-share"></i> delete </a> </span> </div>

your click event on span (delete button) bubbling , triggering click event on .tools element, edit button.

you can prevent event bubbling using event.stoppropagation():

$(".tools").find('span').live("click",function(e){ e.preventdefault(); e.stoppropagation(); alert('clicked on delete'); });

side note: .live() deprecated of jquery 1.7, in favor of .on().

javascript jquery