Change events are not propagated to addEventListener

[ezyang]

jQuery should interoperate with other calls to addEventListener. However, UltButtons fails to propagate change events in this case. Here is an example application which has this problem: http://web.mit.edu/~ezyang/Public/ult/ult.html

To see the problem, open up a JS console and click on the buttons. You should see console messages for each click. Now, trigger the jQuery drag bug (click, drag by a few pixels, and release). You should see the appropriate button depress, but you will not see a console message (you may need to try a few times).

[UltCombo]

Bug confirmed.

Temporary workaround is to attach the listeners through jQuery methods .on() or .change(function(){}).

I'll take a look why this isn't interoperating with the native listeners later this week.

And here's the fiddle.

[ezyang]

It's because the jQuery method for firing a method just iterates through the listener's jQuery has kept track of. To simulate a real event you need to do something like https://github.com/FGRibreau/jQuery-plugin-fireEvent

[UltCombo]

I see. I'm aware that the .trigger() method, even though it uses a synthesized event object, is not warranted to trigger native DOM listeners.

I'll try the linked plugin out and check how cross-browser it is, before porting it to this plugin. I have some close work deadlines atm so it might have to wait a bit.

[ezyang]

No problem, I'm currently working around the issue by replacing the two trigger methods with calls to that plugin.

[UltCombo]

Yup, the plugin works nicely on Chrome -> fiddle. Some more testing and should be able to commit it.

[UltCombo]

Optimized the code keeping only the necessary part and namespaced it, also replaced the console.log to be able to test in older versions of IE. http://jsfiddle.net/zbp8r/12/ looks promising. Edit: error in IE 8 and below. Edit2: Of course, IE<9 doesn't support addEventListener. One more update to use attachEvent instead..

[UltCombo]

Final revision for now: http://jsfiddle.net/zbp8r/17/
Works in IE, but has the IE bug that does not bubble up the change event. Also, might as well add click events while at it. Will work a bit more on it tomorrow.

[UltCombo]

The issue here is that jQuery UI button widget uses label elements to "forward" the native click events to their respective radio/checkboxes, that's why it triggers native listeners naturally.

Firing synthetic events will have more issues, such as the change event which does not bubble up in old IE. Let alone click handlers would be virtually impossible to reproduce in a satisfactory way: firstly, it'd require attaching a click handler to ensure that the click event isn't fired twice for a single click, and secondly, we'd have to wait for a mouseup event before firing the click event, which messes up the event order.

Fixing the actual button widget source might be easier and more useful for everyone. My small repo was mostly a temporary fix for #7665, which was introduced as a fix to #6970. I may work on these issues and find a better way around, deprecating this repo by then.

[UltCombo]

While working on #7665 to make an official jQuery UI fix for the issue, @mikesherov commented on the ticket #7665:

jQuery makes no promise to work with native event handlers. If you're using jquery, we only support using jquery events. [...]

In case my PRs get rejected, I'll branch UltButtons to version 2.0 which will not have support for native listeners either. Sorry but this issue is a little out of this plugin's scope, therefore you can either try adapting your page's code to attach the handlers with jQuery or use the code in the fiddle above if you're not worried about IE not bubbling up the native change event.

[ezyang]

Boo. Oh all right, I guess I'll keep using my hack then....

[pixelwiz]

Thank you! This totally helped the UEX in my site. Waiting for jquery to fix it natively, but great temporary fix, works much better.

[UltCombo]

@pixelwiz No problem. =] I've submitted a fix to jQuery UI, if you'd like to follow the thread: jquery/jquery-ui#1120