Friday, October 19, 2007


This plugin adds bubbling functionality to jQuery. The code is similar to jQuery.fn.trigger's because it's meant to extend it. It also generates it's own event object, that will remain untouched through the bubbling, meaning it's safe to attach attributes to it and grab them with the ancestors while the event bubbles up. I tried to use jQuery's core functions as much as possible, but most functions I needed were not compatible, and would destroy the custom event object, still the code remains short. NOTES:

  • jQuery.Bubble 1.0 was tested with jQuery 1.3.1 and it's compatible with it's event system.
  • jQuery.Bubble 1.2 and further versions will stick to the new system(1.2 's).
  • There're two versions, the regular (async) and the synchronic version. I'm not sure which one works better, I suppose the asynchronic one resembles more to the browser's native (bubbling) behavior, so I'd use that one. Please let me know if you test them.
Links: Related Links:


Anonymous said...

so far only possibility to unit-test intercept/listen code, by simulating a 'real' click

Ariel Flesler said...

Yeap, until jQuery implements event bubbling for fake events. If you use native event trigger, firefox (and probably all w3 compatible browsers) will actually bubble the event for you, because of IE, this technique can't be standarized.
Check the links I added above, they explain this.

Jagga Jagga said...

Little excerpt first:

"New in jQuery 1.3:

All triggered events now bubble up the DOM tree. For example if you trigger an event on a paragraph then it will trigger on that element first, then on the parent element, and its parent, and so on up to the document. The event object will have a .target property equal to the original triggered element. You can prevent the bubbling by calling stopPropagation() or by returning false from your callback."

If I understand correctly this means that manually triggered event should bubble up to it's parent. Right? But it doesn't :( Is your plugin meant to correct this problem?

Ariel Flesler said...


Since jQuery 1.3. Events DO bubble when you use trigger(), not if you use triggerHandler() or call event.stopPropagation().

Unknown said...

Ariel, great plugin. I just downloaded the latest one.
What I do is a long category list in left pane that when clicked populates the center. On refresh I just want to scroll to the category that was selected.

It works fine in IE8, but in Firefox/Chrome it first scrolls fine to the category, but then it scrolls back to the top.

Any suggestions? Thanks.