jQuery addClass problem [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 11 years ago.

I am using IE7. I have an input box as follows:

<input name="location" type="text" id="location" maxlength="512" size="20" class="editable text"/>

And I am trying to do the following:

$("#location").addClass('flagged');

But thi开发者_开发百科s wipes out all existing styling of the text box. The class 'flag' does not have any styling associated with it. The existing classes have the following CSS:

input.editable {
    height: 18px;
    background-color: #FFFFCC;
    padding-top: 0px; 
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    border:#FFFFCC 1px solid;
    margin:0px;
}

input.text {
    text-align:left;
    height:19px;
    width:100px;
}

If I manually add the class 'flagged' to the input box, all styling remains intact. In Firefox the jQuery addClass() does not clear all styling. Why is this happening in IE7?

EDITED I've narrowed it down to this...

if (!String.prototype.trim) 
{
    String.prototype.trim = function(){
        // stuff
    }
}

The

String.prototype.trim = function(){}

declaration seems to be causing the problem. Any ideas?

EDITED AGAIN It seems to not like the fact that it's being called 'trim'. 2 Hours of the day well spent :|

---

Try seeing the classes assigned to the element, IE:

var myClass = $('#location').attr('class'); 

alert("classes = " + myClass);

---

from http://api.jquery.com/addClass/

It's important to note that this method does not replace a class. It simply adds the class, appending it to any which may already be assigned to the elements.

So if you want to toggle a class try this out: http://api.jquery.com/toggleClass/