Odd jQuery behavior in IE

I have a span element that replaces a checkbox so I can style it. I also have a label tag; when clicked it should fire the span's click event as if the user has just clicked the span element. In other words - I'm mimicking the label/checkbox relationship with label/span.

This functionality works as intended in Firefox and Chrome but not IE. In IE 7 and 8, clicking the label does nothing and seems to generate some odd attribute in the source:

<span class="checkbox" id="Vechicle-1" jQuery15105041923284548672="2"/>
<label class="large text-left" for="Vechicle-1" jQuery15105041923284548672="24">

In IE 9 I do not see the jQuery string appended and 2x clicking the label will fire off the span's click event.

$('.checkbox').click(function () {
    $(this).toggleClass('checked');

    if ($(this).hasClass('checked')) {
        $('#checkbox-' + $(this).attr('id')).attr('checked', 'checked');
    } else {
        $('#checkbox-' + $(this).attr('id')).removeAttr('checked');
    }
});

$('label').click(function () {
    $('#' + $(this).att开发者_运维百科r('for')).click();
});

Any idea what's causing this behavior?

---

Maybe the click event is bubbling upwards and trigger some other code you might have, try to prevent it by changing the code to:

$('.checkbox').click(function (event) {
    event.preventDefault();
    $(this).toggleClass('checked');
    //......

And the same for the other click handler.

Edit: found the root of this behaviour. As it turns out, IE browser "let" label affect non form elements as well, including <span> meaning that clicking label element will trigger the click event of the element having ID defined as the label for attribute - no matter what is the element type.

Chrome (and probably Firefox) would let it trigger only form elements like checkbox, as expected.

Proof of this can be found here just browse with IE browser (even 9) and see the span is "clicked" when label is clicked even though the jQuery line is commented.
(Code in fiddle is the same as in the original question)

All this boils down to the interesting conclusion: clicking the label caused the span to be clicked twice - one time by the browser and another by jQuery code, causing it to toggle its state twice.

---

An alternative option is to put your $('.checkbox').click code within an external function, which can then be called when the user clicks on either the checkbox or the label:

function checkboxClick(checkboxElement){
    checkboxElement.toggleClass('checked');

    if (checkboxElement.hasClass('checked')) {
        $('#checkbox-' + checkboxElement.attr('id')).attr('checked', 'checked');
    } else {
        $('#checkbox-' + checkboxElement.attr('id')).removeAttr('checked');
    }

}

$('.checkbox').click(function () {
    checkboxClick($(this));            
});

$('label').click(function () {
    checkboxClick($('#' + $(this).attr('for')));
});

---

Instead of getting the for attrubute and find the element. You can try to use prev method which will give you the span element and the call click method on it.

$('label').click(function () {
    $(this).prev().click();
});

---

IE doesnt behave nicely when you try to set the attribute checked through javascript and this bug has always bitten me in my arse. The easy way that I was able to fix this was to remove the inout element entirely and replace it with a new input element with the attribute checked="checked" set and that works..

var $checkedItem= $(selectorForCheckedBox)


$checkedItem.clone().addAttr("checked","checked").insertAfter('span.checkbox');
$checkedItem.detach();  //$checkedItem.remove() use it appropriately.

Hope this helps. lemme knoe if you find a easier fix.. a comment would help//