Side navigation
#9785 closed bug (fixed)
Opened July 08, 2011 07:16PM UTC
Closed September 01, 2011 05:03PM UTC
Last modified March 14, 2012 04:29AM UTC
delegated events bubble based on the attaching DOM element, not the delegated element
| Reported by: | jtate@dragonstrider.com | Owned by: | dmethvin |
|---|---|---|---|
| Priority: | low | Milestone: | |
| Component: | event | Version: | 1.6.2 |
| Keywords: | neededdocs | Cc: | |
| Blocked by: | Blocking: |
Description
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.
Attachments (0)
Change History (5)
Changed July 09, 2011 12:04AM UTC by comment:1
| component: | unfiled → event |
|---|---|
| keywords: | → needsdocs |
| owner: | → dmethvin |
| priority: | undecided → low |
| status: | new → assigned |
Changed July 11, 2011 01:50PM UTC by comment:2
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'.
Changed July 26, 2011 06:44AM UTC by comment:3
| keywords: | needsdocs → neededdocs |
|---|
The needsdocs for this item have been resolved as part of a reusable.
Changed September 01, 2011 05:03PM UTC by comment:4
| resolution: | → fixed |
|---|---|
| status: | assigned → closed |
Changed March 02, 2012 04:30PM UTC by comment:5
| milestone: | 1.next |
|---|
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.