单击标签时，复选框“更改”事件将起作用。 ie8，ie7 [英] Checkbox 'change' event works when click the label . in ie8, ie7

问题描述

在我的表单中，我有一个 CheckBox ，并且我有一个CheckBox的标签。在firefox& IE9，CheckBox 更改事件按预期工作，但在IE8& IE7中，点击标签而不是复选框时会触发事件。

我的HTML

 < div class =item-container> 
< div class =label-container> 
< / div> 
< div class =textbox-container> 
< input id =AddNewProductCategoryclass =type =checkboxwidth =20pxheight =20px
 value =1name =addnewproductcategorytabindex =1900 /> 
< / div> 
< div class =after-checkbox-label> 
< label class =Verdana11-424039for =AddNewProductCategory> 
添加新服务类别< / 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'）; $ b $ （'＃Category'）。attr（'disabled'，'disabled'）; 
 jq（'＃CategoryName'）。show（） ; 
 jq（'＃store_category'）。show（）; 
} 
}）; 
  

解决方案

仅供将来参考，从我记忆中， 更改事件在旧版本的IE中有点bug。

您必须使用 propertychange 事件IE让它像预期的那样行事。我喜欢使用的代码是：

编辑2（回到核心）

  $（element）.on（navigator.userAgent.match（/ msie / i）？propertychange：change，function（evt）{
 evt。 preventDefault（）; 
 //你的代码在这里
}）; 
  

编辑1（越野车，不可靠）

  $（element）.on（！$。support.changeBubbles？propertychange：change，function（evt）{
 evt .preventDefault（）; 
 //你的代码在这里
}）; 
  

这段代码已经更新，可以与jQuery 1.9+一起使用，其中有来自Marius的一些意见。 / p>

原始（已弃用）

以下是使用旧版jQ版本：

  $（element）.bind（$。browser.msie？'propertychange'：'change'，function （evt）{
 evt.preventDefault（）; 
 // Your code here 
}）; 
  

In my form I have a CheckBox, and I have a label to CheckBox. In firefox & IE9, the CheckBox change event works as expected ,but in IE8 & IE7 , the event fires when click the label but not the checkbox.

My 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>

My 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();
    }
});

解决方案

Just for future references, from what I remember, the "change" event is a bit buggy in older versions of IE.

You have to use the propertychange event in IE to get it to behave as expected. The code I like to use is:

Edit 2 (back to the core)

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

Edit 1 (buggy, not reliable)

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

This code has been updated to work with jQuery 1.9+ with some input from Marius in the comments.

Original (deprecated)

Here is the old code for those using the older versions of jQ:

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

这篇关于单击标签时，复选框“更改”事件将起作用。 ie8，ie7的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！