JQuery .onchange issue in IE8

Solution for onchange event in old Internet Explorer versions

  • Share

Apparently IE8 and older versions of IE browsers do not support JQuery onchange event for checkboxes and radio buttons.

If you are using this for handling this event, your script will fail, because these events will not be fired on IE8 or older IE. Instead of this you can add handler for onclick event which works fine in pretty much any browser.

Note

The jQuery.browser() method has been deprecated since jQuery 1.3 and is removed in 1.9. Instead of it use $.browser

$('#optionsContainer input[type="option"]').bind($.browser.msie && $.browser.version<9 ? 'click': 'change', function(e) {
  e.preventDefault(); 
  // Custom code to handle event   
});
    

This looks like a quick solution, but usualy html design includes some of the fancy JQuery plugins for overriding default style of form fields on the page.

In this case, real input fields are hidden and instead of them, other HTML elements are shown to mask them and create fancy look for the page. Some of these fancy plugins you can find at http://www.jquery4u.com/plugins/15-jquery-radio-button-checkbox-style-plugins/

For the cases like this, solution above will not work since user is not actuially clicking on the input itself but on mask element.

Internet Explorer 8 and older versions of IE have a different name for change event, so instead of binding to click we need to bind to propertychange event.

$('#optionsContainer input[type="option"]').bind($.browser.msie && $.browser.version<9 ? 'propertychange': 'change', function(e) {
  e.preventDefault();
  // Custom code to handle event   
});
    
  • Share

Disclaimer

Purpose of the code contained in snippets or available for download in this article is solely for learning and demo purposes. Author will not be held responsible for any failure or damages caused due to any other usage.

Comments for this article

comments powered by Disqus