onda47 onda47 - 3 years ago 156
Javascript Question

jQuery one() handler executed twice

I have a bug in my jQuery/

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:


$('#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
    , here are the new logs

    • tile out // normal

    • tiles in // why ?

Tiles in
should not be called again as the event is
. And the documentation says "The
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.


$('#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