#11621 closed bug (fixed)
Triggering a event on document doesn't bubble to window
| Reported by: | Owned by: | Rick Waldron | |
|---|---|---|---|
| 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.
Change History (7)
comment:1 Changed 11 years ago by
| Owner: | set to memcacher@… |
|---|---|
| Status: | new → pending |
comment:3 Changed 11 years ago by
| Component: | unfiled → event |
|---|---|
| Milestone: | None → 1.8 |
| Owner: | changed from memcacher@… to Rick Waldron |
| 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
comment:4 Changed 11 years ago by
| Priority: | low → high |
|---|
comment:5 Changed 11 years ago by
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
comment:6 Changed 11 years ago by
| Resolution: | → fixed |
|---|---|
| Status: | assigned → closed |
comment:7 Changed 11 years ago by
Fix #11621, $(document).trigger() must bubble to window.
Changeset: b6581df5de2083e322dcbede4dce74bacf93af5f
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.