javascript - 单击标签时，复选框 'change' 事件起作用。在 ie8, ie7 中

Question

在我的表单中，我有一个 CheckBox，并且我有一个 CheckBox 标签。在 firefox 和 IE9 中，CheckBox change 事件 按预期工作，但在 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 中有点错误。

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

编辑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
});