Search jQuery

jQuery Forum

Using jQuery

web1

addClass not working in IE

in Using jQuery • 8 years ago

Internet Explorer 11 (possibly other versions) ignores the first application of .addClass() if the target element:

is one of the following inline elements: label, strong, span, em
contains an input element (any type)
contains text within another inline element such as: label, strong, span, em

It behaves properly in other browsers.

http://jsfiddle.net/r6SVH/2/

Replies(6)

jakecigar

Re: addClass not working in IE

8 years ago

If you inspect the DOM (F12 mode), you will see that the label tags have the proper class added.

That means it’s an IE error, not a jQuery error. Try coding it another way.

JΛ̊KE

coldfusio..

Re: addClass not working in IE

8 years ago

I found this variant works fine;

<label>
<input name="firstname" />
<em>Text</em>
</label>
<br>

<label>
<input name="lastname" />
<em>Text</em>
</label>
<br>

Based on http://stackoverflow.com/questions/774054/should-i-put-input-tag-inside-label-tag

Jim

coldfusio..

Re: Re: addClass not working in IE

8 years ago

Except in MSIE 8 or below not even the DOM is modified the code I am using is this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>


<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />


<script src="http://code.jquery.com/jquery-2.0.3.js"></script>

<style>
.highlight { background-color: yellow; }
</style>
</head>
<body>
<label>
<input name="firstname" />
<em>Text</em>
</label>
<br>

<label>
<input name="lastname" />
<em>Text</em>
</label>
<br>

<button onclick="highlight();">Highlight</button>
<script>
function highlight(){
$("label").addClass("highlight");
}
</script>
</body>
</html>

jakecigar

Re: Re: addClass not working in IE

8 years ago

Is it the name parameter that makes it work?

JΛ̊KE

coldfusio..

Re: addClass not working in IE

8 years ago

Here is a Fiddle, and yes it seems to be the name attribute.

http://jsfiddle.net/r6SVH/6/

On MSIE 8 and lower the Fiddle crashes. But as a webpage the code runs but does nothing.

Jim

web1

Re: addClass not working in IE

8 years ago

It's not the name attribute that causes it to work. It's the line breaks within the label tag: http://jsfiddle.net/r6SVH/7/

The code I originally started with, before reducing it down for the fiddle, had name tags and the same problem.

You've all helped me confirm it as an IE bug, but fortunately one with simple workarounds. Adding the line breaks turned out to be the best solution in my real-world case.

I guess I wasn't really looking for a solution (there are several workarounds) as much as confirmation that I wasn't crazy and it is a bug with IE.

Thanks team!

Top Reply

Response title

Attachments

jQuery Forum

addClass not working in IE

Replies(6)

Re: addClass not working in IE

Re: addClass not working in IE

Re: Re: addClass not working in IE

Re: Re: addClass not working in IE

Re: addClass not working in IE

Re: addClass not working in IE

Statistics

Tags

Actions