JQuery.on () event argument not working in Firefox

Question

Please see this script:

http://jsfiddle.net/e9uwA/1/

What should happen here is that the smaller box should disappear through the css transition, and then ontransitionend, adjust the height of the larger window. It works fine in Chrome, Opera, but it does not work in Firefox.

I think this has to do with the second argument to event for the .on () jQuery method. If this is not allowed, are there any other alternatives?

Thanks!

Oh, and neglect the comments written in the script :)

Answer 1

You have event handling a bit of the wrong way. Some browsers have an inline object called event , which has a stopPropagation() method. In Firefox, no. jQuery handles these differences elegantly, but you are not using it correctly.

Event handlers look like:

 .on('eventName', event, function(){...}) 

They should be

 .on('eventName', function(evt){...}) 

Where evt is the jQuery wrapper around the event.

 function start() { $('.childDiv').addClass('faded').on('transitionend', function(evt){ evt.stopPropagation(); //I suppose this ended the event listener for the childDiv $('.childDiv').off('transitionend'); $('.parentDiv') .addClass('no-height') .on('transitionend',function(evt) { //why is 'opacity' being read? any way to fix this? alert(evt.propertyName); }); }); } 

(However, note that jQuery.Event does not have a propertyName propertyName , so final alert will show undefined )

Real-time example: http://jsfiddle.net/qCKcg/