Question

I have a div and within the div there is a child img element.
Both div and img have their very own javascript click handler.

My objective is to have when I click on the img, only the img click is triggered.
But currently the div click handler is responding before the img click handler.

Here’s the example: http://jsfiddle.net/5j73w/

I’m not sure if parent’s position: relative is the culprit. But that’s a compulsory style.
I also tried with z-index for img but no avail.

Thanks in advance!

Answer 1

Replace the deprecated .live() by .on() as you’re using jQuery 1.7+.

$('#parent > img').on('click', function(e) {

Fiddle

Or, if you need the event delegation (e.g. in case you’re adding content dynamically to #parent):

//run this line when #parent is in the DOM
$('#parent').on('click', '> img', function(e) {

Fiddle

.live bubbles the event all the way up to the document to then check if the given selector matches the target element, by then you can’t stop the event propagation anymore. From the docs:

Calling event.stopPropagation() in the event handler is ineffective in stopping event handlers attached lower in the document; the event has already propagated to document.

Also, to answer the “parent takes precedence” question, that’s not case. When you call .live, you’re actually attaching a handler to the document.

In this case, the handler attached through .click(function(){}) (which in jQuery 1.7+ is a shorthand for .on('click'[, null], function(){}), executes before the handler attached to the document, which is the expected event propagation bubbling behavior.