onda47 onda47 - 1 year ago 123
Javascript Question

jQuery one() handler executed twice

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.

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download