Question

I have a simple html, a div which contains some html and a delete link:

<div class="item">
I am a text this section can contain a lot of html and stuff...
<a class="del_button" href="#">Delete</a>
</div>

here is the jQuery part:

$(".item").click(function(){
alert("Item clicked");
});

$(".del_button").click(function(){
alert("DELETE clicked");
});

If I click on the “Delete” link, two messageboxes are shown, “Item clicked” and “DELETE clicked” – How can I suppress the “Item clicked” alert if I click the delete button?

Answer 1

http://api.jquery.com/event.stopPropagation/

Description: Prevents the event from bubbling up the DOM tree,
preventing any parent handlers from being notified of the event.

$(".del_button").click(function(e){
    alert("DELETE clicked");
    e.stopPropagation();
});