Side navigation
#11621 closed bug (fixed)
Opened April 23, 2012 01:24PM UTC
Closed May 12, 2012 06:25PM UTC
Last modified May 16, 2012 06:05PM UTC
Triggering a event on document doesn't bubble to window
Reported by: | memcacher@gmail.com | Owned by: | rwaldron |
---|---|---|---|
Priority: | high | Milestone: | 1.8 |
Component: | event | Version: | 1.7.2 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
When triggering any event on any element it bubbles up all the way to window. When triggering an event on document it does NOT. Following example shows what happens, two event handler get registered on window, one with and one without a selector. When triggering an event on element p both get executed like expected, when clicking the second div and therefore triggering the event on the document itself nothing gets executed as the event doesn't bubble up to window. I posted the whole html page so it's easier to test.
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script> (function (window, $j, undefined) { $j(document).ready(function(){ $j(window).on('anyevent.bug','p', function(){console.log('Registered on window with p as selector');}); $j(window).on('anyevent.bug', function(){console.log('Registered on window without a selector');}); $j('#someId').on('click', function(){ $j('p').trigger('anyevent'); //this trigger bubbles up all the way to the window and executes correctly }); $j('#otherId').on('click', function(){ $j(document).trigger('anyevent'); //this event doesn't bubble up to the window and therefore doesn't cause any handler to run }); }); })(window, jQuery); </script> </head> <body> <p> Just some content. </p> <div id="someId">Click me to trigger a click event on the p element</div> <br /> <div id="otherId">Click me to trigger a click event on the document</div> </body> </html>
The problem is in the trigger method itself, starting with line 3196 in jQuery - 1.7.2:
// Only add window if we got to document (e.g., not plain obj or detached DOM) if ( old && old === elem.ownerDocument ) { eventPath.push([ old.defaultView || old.parentWindow || window, bubbleType ]); }
old is null in this case and elem is the document.
Attachments (0)
Change History (7)
Changed April 23, 2012 01:24PM UTC by comment:1
owner: | → memcacher@gmail.com |
---|---|
status: | new → pending |
Changed April 24, 2012 12:31PM UTC by comment:2
Posted the code on jsFiddle: http://jsfiddle.net/NE6PJ/1/
Changed April 24, 2012 04:08PM UTC by comment:3
component: | unfiled → event |
---|---|
milestone: | None → 1.8 |
owner: | memcacher@gmail.com → rwaldron |
priority: | undecided → low |
status: | pending → assigned |
Why are you triggering events on the document to bubble them to the window? If you use the "body", this works fine. Still seems like a bug. Patch to follow
Changed April 24, 2012 04:08PM UTC by comment:4
priority: | low → high |
---|
Changed April 25, 2012 05:34AM UTC by comment:5
I was writing a plugin where the events are handled according an optional priority set when registering the handler, imho a very nice feature which would enrich jQuery core. Events, which have at least on handler with a priority in it's execution queue from bottom to top (bubbling), bubble all the way to the window and finally get executed depending on their priority, in case somebody triggers an event on document it doesn't work.
I posted the plugin in the jQuery core forum, may you want to take a look and have some feedback: https://forum.jquery.com/topic/event-ordering-by-priority
Changed May 12, 2012 06:25PM UTC by comment:6
resolution: | → fixed |
---|---|
status: | assigned → closed |
Thanks for taking the time to contribute to the jQuery project! Please provide a complete reduced test case on jsFiddle to help us assess your ticket.
Additionally, be sure to test against the jQuery Edge version to ensure the issue still exists. To get you started, use this boilerplate: http://jsfiddle.net/FrKyN/ Open the link and click to "Fork" (in the top menu) to get started.