CODEWITHSUNDEEP
jquerycssinternet-explorer
Alex
Alex

Reputation: 4507

jQuery addClass() not working in IE (8, 9 and probably the other one too)

Simple html:

<div class="stuff-choice">
  <div class="item a">
    <label class="signup-checkbox">
      <input type="checkbox" value="a" name="stuff[a][]" id="stuff_choice_" class="things">
      <strong>A</strong>
    </label>
  </div>
</div>

Basically I detect when someone click on the checkbox with the css class .things, and then I updated the parent <div> with a css class .selected.

The JS: (with a $(document).ready(function(){ ...

$('.things').click(function() {     
    item = $(this).closest("div");
    if ($(this).attr('checked') != null)
        $(item).addClass('selected');
    else
        $(item).removeClass('selected');
});

This works like a charm under: - Safari (mac & win) - Firefox (mac & win)

But not under IE !?!?

I have no clue why...

Thanks,

Alex

Upvotes: 1

Views: 8580

Answers (4)

t_plusplus
t_plusplus

Reputation: 4209

I used .prop('disabled', 'disabled') instead of addClass('hide') - it worked for me.

Upvotes: 0

mccow002
mccow002

Reputation: 6914

I think you're issue is the object you're calling .addClass on.

item = $(this).closest("div");

In this line, item is set to a jQuery object.

Therefore, in your next statement, you don't need the $(item) syntax, just use item.

$('.things').click(function() {     
    item = $(this).closest("div");
    if ($(this).attr('checked') != null)
        item.addClass('selected');
    else
        item.removeClass('selected');
});

Upvotes: 0

Andreas Eriksson
Andreas Eriksson

Reputation: 9027

IE is notorious for freaking out if you don't declare your variables by prefixing them with "var".

So try this:

var item = $(this).closest("div");

Upvotes: 4

ShankarSangoli
ShankarSangoli

Reputation: 69905

Try this, closest already gives a jQuery object you dont have to wrap it in $() and also is() method can be used to check is checked or not.

$('.things').click(function() {     
    $item = $(this).closest("div");
    if ($(this).is(':checked'))
        $item.addClass('selected');
    else
        $item.removeClass('selected');
});

Upvotes: 2

Related Questions