Question

在我的表单中，我有一个CheckBox，我有一个CheckBox的标签。在firefox＆amp; IE9，CheckBox change event按预期工作，但在IE8＆amp; 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
});

单击标签时，复选框“更改”事件有效。在ie8，ie7

1 个答案: