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.

Answer 1

why ?

A call to .one() is within first .one() event handler where the the event is attached to the same selector #tiles