Question

I have have a 2 div element. One is child and one is parent like :

<div id="p">
  <div id="c">
  </div>
</div> 

The parent div has 2 event attached click and dblclick and child div has 1 event attached click. Now my problem is when i clicked on the child div the parent div click event also executed. I tried e.stopPropagation(); but still same behavior. Help me ?

Answer 1

You must have tried it wrong, because stopPropagation should do the trick here. Make sure you stop the propagation of the event at the child element:

$("#c").click(function (e) {
    e.stopPropagation(); //Will prevent event bubbling to #p
});

Here’s a working example.

---

The only exception to the above is if you have bound the event handlers with the live method (which you shouldn’t be doing since live is deprecated). You cannot stop the propagation of live events since the event handler is bound to the document, rather than the element, and the event has to propagate all the way to the document before it is executed.