CODEWITHSUNDEEP
jquerycssjquery-uisettimeout
jbabey
jbabey

Reputation: 46647

Odd issue with jQuery .removeClass() not doing anything

I have some code that adds classes to an element and then tries to remove them and add different ones 1 second later. I'm getting some very odd behavior that I can't even reproduce in a simple jsfiddle example.

Here's the relevant JavaScript code I have:

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);

And here is what the console is saying:

enter image description here

As you can see, adding the destroyed class works fine, but the call to removeClass() inside of the setTimeout appears to be doing nothing, and then the .addClass(classes.blank + ' ui-draggable'); also appears to be working fine. Also, if I pass a single class to removeClass it removes that one class without a problem.

If it were an issue of context or currentTile being the wrong element, I would think the addClass would also fail? Anyone have any idea what is going on here?

Additional info: jQuery latest (v.1.9.0 I think), jQuery UI v 1.10.0, Chrome v.24.0.1312.56 m

Edit: The problem appears to be directly related to jQuery UI, and can be seen happening in this fiddle.

Edit 2: This was confirmed as a bug in jQuery, and has been fixed.

Upvotes: 12

Views: 21587

Answers (1)

Dom
Dom

Reputation: 40459

Try using .removeAttr('class') rather than .removeClass().

DEMO:

http://jsfiddle.net/MvvmJ/8/

Hope this helps and let me know if you have any questions!

Upvotes: 11

Related Questions