레이블을 클릭하면 '변경'체크 박스가 작동합니다. 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의 이전 버전에서 약간의 버그가 .

예상대로 동작하려면 IE에서 propertychange 이벤트를 사용해야합니다. 내가 사용하고자하는 코드는 다음과 같습니다 (다시 코어)

편집이이 코드가있다

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

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

편집 1 (버그,하지 믿을 수) 코멘트에서 Marius로부터의 약간의 의견으로 jQuery 1.9+와 작동하도록 업데이트되었습니다.

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