I am encountering a strange issue with some code that adds and removes classes from an element in JavaScript. Despite my best efforts, I cannot replicate the odd behavior in a simple jsfiddle example.
Below is the relevant section of JavaScript that is causing trouble:
console.log('before destroyed: ' + currentTile.get(0).className);
currentTile.addClass(classes.destroyed);
console.log('after destroyed: ' + currentTile.get(0).className);
setTimeout(function () {
console.log('before blanking: ' + currentTile.get(0).className);
currentTile.removeClass().addClass(classes.blank + ' ui-draggable');
console.log('after blanking: ' + currentTile.get(0).className);
}, 2000);
The console output shows inconsistent results as follows:
While adding the destroyed class works without any issues, the problem arises when trying to remove classes using removeClass() within the setTimeout function. However, adding new classes using
.addClass(classes.blank + ' ui-draggable');removeClass does remove that specific class successfully.
If the issue was related to context or selecting the wrong element (currentTile), I would expect the addClass method to also fail. Can anyone shed light on what might be causing this unexpected behavior?
Additional details: Using jQuery latest version (possibly v1.9.0), jQuery UI v1.10.0, Chrome browser v24.0.1312.56 m
Edit: The root cause of this issue seems to be connected to jQuery UI, and can be observed in action in this fiddle.
Edit 2: This problem has been verified as a bug in jQuery, and fortunately, it has been rectified.