jQuery one() handler executed twice

Question

I have a bug in my jQuery/

animate.css

code. The problem is an event handler that is called twice but it should be executed only one. You can find the code here, the important line is below:

JSFiddle

$('#tiles').addClass(tiles_in).one(animation_end, function() {

    // called twice

    log('tiles in');

});

In order to reproduce the bug, follow these steps:

Wait for the animation to end, which will output these logs
- change_tiles
- tiles out
- tiles in

Click on the yellow
div
, here are the new logs
- tile out // normal
- tiles in // why ?

Tiles in

should not be called again as the event is

one()

. And the documentation says "The

.replaceWith()

method removes all data and event handlers associated with the removed nodes." So I don't know.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

I have found it myself after logging the event that was fired.

https://jsfiddle.net/uhz6Ly0s/8/

$('#tiles').addClass(tiles_in).one(animation_end, function(event) {
    log('tiles in, event=' + event.type);
});

The first event is animationend, and the second is webkitAnimationEnd. For some reasons, the second one is fired at the end of the click event.

jQuery one() handler executed twice

Sign up