Bug Tracker

Opened 8 years ago

Closed 8 years ago

Last modified 7 years ago

#9785 closed bug (fixed)

delegated events bubble based on the attaching DOM element, not the delegated element

Reported by: jtate@… Owned by: dmethvin
Priority: low Milestone:
Component: event Version: 1.6.2
Keywords: neededdocs Cc:
Blocked by: Blocking:

Description

http://jsfiddle.net/rbcCu/1/

The events are bubbling based on the delegating DOM element, not the delegated DOM element. In the example above, the events should fire in this order:

delegate.#B A.#B myevent B.myevent A.myevent <stop>

However, the order the events fire is as follows: B.myevent happened A.myevent happened A.#B myevent happened <stop>

The first delegated event is never reached, though the DOM element delegated to is lower in the DOM hierarchy than #A.

The documentation states

...events handled by .delegate() will always propagate to the element to which they are delegated; event handlers on any elements below it will already have been executed by the time the delegated event handler is called.

The actual behavior is opposite, delegated event listeners are propagated to the delegating element, though the described behavior would be preferable.

Change History (5)

comment:1 Changed 8 years ago by dmethvin

Component: unfiledevent
Keywords: needsdocs added
Owner: set to dmethvin
Priority: undecidedlow
Status: newassigned

This is a docs issue. If a .bind()ed handler below the .delegate() element calls .stopPropagation() then the event isn't going to make it any further than that up the tree. I suspect the "will always propagate" was meant to emphasize that the event wouldn't be processed until the event *did* propagate to that point.

I'll mark this as needsdocs and take it as a reminder to clean up the docs.

comment:2 Changed 8 years ago by Joseph Tate <jtate@…>

Yes, there's a significant problem with the docs, and defining what is meant by the the term delegated element would be a good thing, is it the jQuery object? Or is it the list of elements matching the selector passed in? I think it goes further than that; I think it's a bad method name. I don't think that $.fn.delegate() is delegating, it's collecting, though collect might confuse with the collection phase of JS event handling.

The element passed to the callback is the delegatED element in my mind, but the callbacks are called in DOM order according to the delegatING element (the jQuery object). The call $(foo).delegate(selector, event, callback) should be equivalent to $(foo).find(selector).bind(event, callback), except that it should be like live() in looking for elements that are added that match 'selector'.

comment:3 Changed 8 years ago by addyosmani

Keywords: neededdocs added; needsdocs removed

The needsdocs for this item have been resolved as part of a reusable.

comment:4 Changed 8 years ago by dmethvin

Resolution: fixed
Status: assignedclosed

comment:5 Changed 7 years ago by dmethvin

Milestone: 1.next
Note: See TracTickets for help on using tickets.