Question

I have the following code

<div class="test-123">
   <p>Some Text</p>
   <div class="delete"></div>
   <div class="edit"></div>
</div>

The problem is that I have to have onclick jquery handlers for the three elements ( test-123, delete and edit ). I face the following problem. When I click on delete the onclick handler of test-123 is also executed after the onclick handler of the delete is finshed.

Is there a way to somehow prevent that?

Answer 1

You are looking for stopPropogation

event.stopPropagation()

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

$(function(){   
    $(".test-123").click(function(){
       alert("click on div"); 
    });      
    $(".delete,.edit").click(function(e){
       e.stopPropagation() 
       alert("click on Links"); 
    });    
});​

Comment out the e.stopPropagation line and see what happens.

Working demo : http://jsfiddle.net/Pjn3s/2/