0

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?

MilMike
  • 12,571
  • 15
  • 65
  • 82
  • 1
    possible duplicate of [jquery stop child triggering parent event](http://stackoverflow.com/questions/2364629/jquery-stop-child-triggering-parent-event) – Matt Oct 25 '11 at 10:52

2 Answers2

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();
});
jantimon
  • 36,840
  • 23
  • 122
  • 185
0
$(".del_button").click(function(e){

alert("DELETE clicked");
    e.stopPropagation();

});

you can check from here http://jsfiddle.net/tqT2u/

erimerturk
  • 4,230
  • 25
  • 25