|
I have found a couple of fixes for the problem of using toggleClass and removeClass in Internet Explorer (IE). It seems the root of the problem is that when you have multiple classes assigned to the className property of an element in IE (“class1 class2”) and you remove one of the classes from the className property, you can be left with a className property containing classes with leading spaces (“ class2”). What is even worse, if you remove both classes multiple times, you can end up with the className property containing just blank spaces (“ “). It is these leading spaces which are causing toggleClass and removeClass to fail with multiple classes assigned to the className property. This problem does not seem to exist in Firefox since it seems to remove leading and trailing spaces when the className property is changed.
After doing some research, I have come up with two possible solutions. The first solution involves modifying the regular _expression_ used to remove the class from the className property. On line 345 of the jQuery source code, you will find the following:
new RegExp("(^|\\s*\\b[^-])"+c+"($|\\b(?=[^-]))", "g"), "") );
Change the regular _expression_ to the following:
new RegExp("(^\\s*\\b[^-]|)"+c+"($\\b(?=[^-])|)", "g"), "") );
Note the position of the pipe (|) characters. This solution will enable the removal of the specified class from the className property in IE, however, it does not solve the problem of the extra spaces. Although the class being toggled or removed can now be found within the className property, the className property will continue to grow with extraneous blank spaces each time a class is removed. The blank spaces do not seem to cause any short term problem, however, they might if the user uses the Web application for more than a short period.
The other solution is more of a sledgehammer approach as it involves removing the extraneous blank spaces from the className property anytime a class is removed. This solution involves trimming the spaces from the className during the class removal. On lines 343 to 345 of the jQuery source code you will see the following implementation of the “remove” method of the className property:
o.className = !c ? "" : o.className.replace( new RegExp("(^|\\s*\\b[^-])"+c+"($|\\b(?=[^-]))", "g"), "");
If you change this code to use the “trim” method of the jQuery class, you will have the following:
o.className = jQuery.trim( !c ? "" : o.className.replace( new RegExp("(^|\\s*\\b[^-])"+c+"($|\\b(?=[^-]))", "g"), "") );
This solution does not require changing the regular _expression_ since the extraneous spaces will no longer appear within the className property. This is the solution I am currently using, however, if someone has a better solution, please let me know.
Mark D. Lincoln
Mark D. Lincoln, Director of Research & Development Eye On Solutions, LLC (866) 253-9366x101
|
_______________________________________________ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
