jQuery通过更改属性更改元素的预定义样式在IE中不起作用

Question

I have a few predefined styles in my css based on an elements attribute. If i update the attribute's value to something new that also has a predefined style the style is applied in FF and Chrome but not IE. See example and type in input field please.

JS:

$('input').on('keypress', function(){
    var l = parseInt($(this).attr('level'), 10) + 1;
    $(this).attr('level', l);
});

CSS:

input[level="0"]{background:red;}
input[level="1"]{background:blue;}
input[level="2"]{background:green;}
input[level="3"]{background:black;}

http://jsfiddle.net/ce6S4/

Any help is appreciated, thank you.

EDIT: works with IE 9 but not <= 8

Answer 1

It's an IE-bug. Notice that the element is rendered correctly when you resize the window.

Trigger the reflow by setting the class name:

this.className = this.className; // Or .addClass(' ');

Demo: http://jsfiddle.net/ce6S4/6/

$('input').on('keypress', function(){
    var l = parseInt($(this).attr('level'), 10) + 1;
    $(this).attr('level', l).addClass(' ');
});

Answer 2

http://jsfiddle.net/ce6S4/3/

try this

   $('input').on('keydown', function(){
         var l = parseInt($(this).attr('level'), 10) + 1;
    alert(l); //can be removed.
         $(this).attr('level', l.toString()).hide().show().focus();

});​