单击标签时,复选框"更改"事件有效.在ie8,ie7

Question

在我的表格中,我有一个CheckBox,我有一个标签给CheckBox.在firefox和IE9中,CheckBox change event按预期工作,但在IE8和IE7中,单击标签而不是复选框时会触发事件.

我的HTML

<div class="item-container">
    <div class="label-container">
    </div>
    <div class="textbox-container">
        <input id="AddNewProductCategory" class="" type="checkbox" width="20px" height="20px"
            value="1" name="addnewproductcategory" tabindex="1900" />
    </div>
    <div class="after-checkbox-label">
        <label class="Verdana11-424039" for="AddNewProductCategory">
            Add New Service Category</label>
    </div>
</div>

我的jQuery

jq('#AddNewProductCategory').change(function(){
    jq('#CategoryName').next('label[for=CategoryName]').remove();
    jq('#Category').next('label[for=Category]').remove();

    if (!jq('#AddNewProductCategory').is(':checked')) {
         alert("in change");
        jq('input[name="newcategory"]').val('');
        jq('#CategoryName').hide();     
        jq('#store_category').hide();
        jq('#Category').removeAttr('disabled');

    }
    else {
        jq('#Category').attr('disabled', 'disabled');
        jq('#CategoryName').show();     
        jq('#store_category').show();
    }
});

Answer 1

仅仅为了将来的参考,从我记忆中,"更改"事件在旧版本的IE中有点儿麻烦.

您必须propertychange在IE中使用该事件才能使其按预期运行.我喜欢使用的代码是:

编辑2(回到核心)

$(element).on(navigator.userAgent.match(/msie/i) ? "propertychange" : "change", function(evt) {
    evt.preventDefault();
    // Your code here
});

编辑1(越野车,不可靠)

$(element).on(!$.support.changeBubbles ? "propertychange" : "change", function(evt) {
    evt.preventDefault();
    // Your code here
});

此代码已更新,可与jQuery 1.9+一起使用,并在评论中提供Marius的一些输入.

原文(已弃用)

以下是使用旧版jQ的旧代码:

$(element).bind($.browser.msie ? 'propertychange' : 'change', function(evt) {
    evt.preventDefault();
    // Your code here
});