Question

I’m binding events to a container div with jQuery’s on() function and supplying a selector of “.myItem”.

$container.on('click', '.myItem', { me: this }, MyClass.prototype.onItemClick);

Everything is working great other than the fact that child elements that don’t have a class of “myItem” are still causing the event to fire. Is that the correct behavior? That the selector would match an element with a class of “myItem” AND its children?

<div class="myItem">
   <div>My Label</div>
</div>

From my experiments both of the <div>s above will fire the event. What I want is to a click on the child div to bubble up to the parent one with the class name, then the event fire for that element. I.e. inside the event handler, event.target should always refer to the .myItem element.

Is this possible?

Answer 1

I want a click on the “My Label” div to fire the event, but bubble up so that event.target is the “myItem” div.

In this scenario, myItem is not going to be event.target. It will be event.currentTarget. See the issue I filed regarding that for more details.