Question

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 this 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 😐

Answer 1

Try seeing the classes assigned to the element, IE:

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

alert("classes = " + myClass);