Getting jQuery to recognise .change() in IE

JqueryInternet Explorer

Jquery Problem Overview

I'm using jQuery to hide and show elements when a radio button group is altered/clicked. It works fine in browsers like Firefox, but in IE 6 and 7, the action only occurs when the user then clicks somewhere else on the page.

To elaborate, when you load the page, everything looks fine. In Firefox, if you click a radio button, one table row is hidden and the other one is shown immediately. However, in IE 6 and 7, you click the radio button and nothing will happen until you click somewhere on the page. Only then does IE redraw the page, hiding and showing the relevant elements.

Here's the jQuery I'm using:

$(document).ready(function () {
  $(".hiddenOnLoad").hide();

  $("#viewByOrg").change(function () {
    $(".visibleOnLoad").show();
    $(".hiddenOnLoad").hide();
  });

  $("#viewByProduct").change(function () {
    $(".visibleOnLoad").hide();
    $(".hiddenOnLoad").show();
  });
});

Here's the part of the XHTML that it affects. The whole page validates as XHTML 1.0 Strict.

<tr>
  <td>View by:</td>
  <td>
    <p>
      <input type="radio" name="viewBy" id="viewByOrg" value="organisation"
      checked="checked" />Organisation</p>
    <p>
      <input type="radio" name="viewBy" id="viewByProduct" value="product" />Product</p>
  </td>
</tr>
<tr class="visibleOnLoad">
  <td>Organisation:</td>
  <td>
    <select name="organisation" id="organisation" multiple="multiple" size="10">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
  </td>
</tr>
<tr class="hiddenOnLoad">
  <td>Product:</td>
  <td>
    <select name="product" id="product" multiple="multiple" size="10">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
  </td>
</tr>

If anyone has any ideas why this is happening and how to fix it, they would be very much appreciated!

Jquery Solutions

Solution 1 - Jquery

Try using .click instead of .change.

Solution 2 - Jquery

The problem with using the click event instead of change is you get the event if the same radio box is selected (i.e. hasn't actually changed). This can be filtered out if you check that the new value is different than the old. I find this a little annoying.

If you use the change event, you may notice that it will recognize the change after you click on any other element in IE. If you call blur() in the click event, it'll cause the change event to fire (only if the radio boxes actually have a changed).

Here's how I'm doing it:

// This is the hack for IE
if ($.browser.msie) {
  $("#viewByOrg").click(function() {
    this.blur();
    this.focus();
  });
}

$("#viewByOrg").change(function() {
  // Do stuff here
});

Now you can use the change event like normal.

Edit: Added a call to focus() to prevent accessibility issues (see Bobby's comment below).

Solution 3 - Jquery

Have you tried IE's onpropertychange event? I dont know if it makes a difference but it's probably worth a try. IE does not trigger the change event when values are updated via JS code but perhaps onpropertychange would work in this instance.

$("#viewByOrg").bind($.browser.msie? 'propertychange': 'change', function(e) {
  e.preventDefault(); // Your code here 
});

Solution 4 - Jquery

This should work too:

$(document).ready(function(){
   $(".hiddenOnLoad").hide();
   $("#viewByOrg, #viewByProduct").bind(($.browser.msie ? "click" : "change"), function () {
                        $(".visibleOnLoad").show();
                        $(".hiddenOnLoad").hide();
                    });
});

Thanks Pier. This was very helpful.

Solution 5 - Jquery

In IE you must use the click event, in other browsers onchange. Your function could become

$(document).ready(function(){
   $(".hiddenOnLoad").hide();
   var evt = $.browser.msie ? "click" : "change";
   $("#viewByOrg").bind(evt, function () {
                        $(".visibleOnLoad").show();
                        $(".hiddenOnLoad").hide();
                    });

   $("#viewByProduct").bind(evt, function () {
                        $(".visibleOnLoad").hide();
                        $(".hiddenOnLoad").show();
                    });     
});

Solution 6 - Jquery

add this plugin

jQuery.fn.radioChange = function(newFn){
	this.bind(jQuery.browser.msie? "click" : "change", newFn);
}

then

$(function(){
	$("radioBtnSelector").radioChange(function(){
		//do stuff
	});
});

Solution 7 - Jquery

I had the same issue with input text.

I changed:

$("#myinput").change(function() { "alert('I changed')" });

to

$("#myinput").attr("onChange", "alert('I changed')");

and everything is working fine for me!

Solution 8 - Jquery

This is a simple way to tell IE to fire the change event when the element is clicked:

if($.browser.msie) {
    $("#viewByOrg").click(function() {
        $(this).change();
    });
}

You could expand this to something more generic to work with more form elements:

if($.browser.msie) {
    $("input, select").click(function() {
        $(this).change();
    });
    $("input, textarea").keyup(function() {
        $(this).change();
    });
}

Solution 9 - Jquery

I'm pretty sure this is a known issue with IE. Adding a handler for the onclick event should fix the problem:

$(document).ready(function(){

    $(".hiddenOnLoad").hide();

    $("#viewByOrg").change(function () {
        $(".visibleOnLoad").show();
        $(".hiddenOnLoad").hide();
    });

    $("#viewByOrg").click(function () {
        $(".visibleOnLoad").show();
        $(".hiddenOnLoad").hide();
    });

    $("#viewByProduct").change(function () {
        $(".visibleOnLoad").hide();
        $(".hiddenOnLoad").show();
    });     

    $("#viewByProduct").click(function () {
        $(".visibleOnLoad").hide();
        $(".hiddenOnLoad").show();
    });     
});

Solution 10 - Jquery

In IE, force radio and checkboxes to trigger a "change" event:

if($.browser.msie && $.browser.version < 8)
  $('input[type=radio],[type=checkbox]').live('click', function(){
    $(this).trigger('change');
  });

Solution 11 - Jquery

as of jquery 1.6 this is no longer a problem.. not sure when it was fixed though.. Thank god for it though

Solution 12 - Jquery

If you change your jQuery version to 1.5.1, you won't have to adjust your code. Then IE9 wil listen just perfect to:

$(SELECTOR).change(function() {
    // Shizzle
});

http://code.jquery.com/jquery-1.5.1.min.js

Solution 13 - Jquery

the trick with the click works... but if you want to get the correct state of radio or checkbox you can use this:

(function($) {
    $('input[type=checkbox], input[type=radio]').live('click', function() {
       var $this = $(this);
       setTimeout(function() {
          $this.trigger('changeIE'); 
       }, 10) 
    });
})(jQuery);

$(selector).bind($.browser.msie && $.browser.version <= 8 ? 'changeIE' : 'change', function() {
  // do whatever you want
})

Solution 14 - Jquery

imo using click instead of change makes the ie behaviour be different. I'd rather emulate the change event behaviour using a timer (setTimout).

something like (warning - notepad code):

if ($.browser.msie) {
  var interval = 50;
  var changeHack = 'change-hac';
  var select = $("#viewByOrg");
  select.data(changeHack) = select.val();
  var checkVal=function() {
    var oldVal = select.data(changeHack);
    var newVal = select.val();
    if (oldVal !== newVal) {
      select.data(changeHack, newVal);
      select.trigger('change')
    }
    setTimeout(changeHack, interval);
  }
  setTimeout(changeHack, interval);
}

$("#viewByOrg").change(function() {
  // Do stuff here
});

Solution 15 - Jquery

try this, it works for me

$("#viewByOrg")
        .attr('onChange', $.browser.msie ? "$(this).data('onChange').apply(this)" : "")
        .change( function(){if(!$.browser.msie)$(this).data('onChange').apply(this)} )
        .data('onChange',function(){alert('put your codes here')});

Solution 16 - Jquery

This may help someone: Instead of starting with the form's id, target the select id and submit the form on change, like this:

<form id='filterIt' action='' method='post'>
  <select id='val' name='val'>
    <option value='1'>One</option>
    <option value='2'>Two</option>
    <option value='6'>Six</option>
  </select>
  <input type="submit" value="go" />
</form>

and the jQuery:

$('#val').change(function(){
  $('#filterIt').submit();
});

(Obviously, the submit button is optional, in case javascript is disabled)

Solution 17 - Jquery

//global
var prev_value = ""; 

$(document).ready(function () {
  
 if (jQuery.browser.msie && $.browser.version < 8)
      $('input:not(:submit):not(:button):not(:hidden), select, textarea').bind("focus", function () { 
         prev_value = $(this).val();
	
       }).bind("blur", function () { 
	     if($(this).val() != prev_value)
	     has_changes = true;
       });
}

Solution 18 - Jquery

Try the following:

.bind($.browser.msie ? 'click' : 'change', function(event) {

Solution 19 - Jquery

Avoid using .focus() or .select() before .change() function of jquery for IE, then it works fine, im using it in my site.

Thanks

Solution 20 - Jquery

Please try with using each instead of change / click, which is working fine even first time in IE as well as other browsers

Not Working a first time

$("#checkboxid").**change**(function () {
            
});

Working fine even first time

$("#checkboxid").**each**(function () {
                   
});
Categories
Recommended Jquery Solutions
Recommended Internet Explorer Solutions

Previous Solution:

string c_str() vs. data()

C++StlC Str

Next Solution:

Linux command (like cat) to read a specified quantity of characters

LinuxCommand Line

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPhilip MortonView Question on Stackoverflow
Solution 1 - JqueryPaolo BergantinoView Answer on Stackoverflow
Solution 2 - JqueryMark A. NicolosiView Answer on Stackoverflow
Solution 3 - JqueryKevinView Answer on Stackoverflow
Solution 4 - JqueryArthur BeznerView Answer on Stackoverflow
Solution 5 - JqueryPier LuigiView Answer on Stackoverflow
Solution 6 - JquerydovidweiszView Answer on Stackoverflow
Solution 7 - JqueryfabriceView Answer on Stackoverflow
Solution 8 - JquerypaulView Answer on Stackoverflow
Solution 9 - JqueryChris ZwirykView Answer on Stackoverflow
Solution 10 - JqueryJeoff WilksView Answer on Stackoverflow
Solution 11 - JqueryBaz1ngaView Answer on Stackoverflow
Solution 12 - JqueryBas MattheeView Answer on Stackoverflow
Solution 13 - JquerynostopView Answer on Stackoverflow
Solution 14 - JqueryKen EgoziView Answer on Stackoverflow
Solution 15 - JqueryRainChenView Answer on Stackoverflow
Solution 16 - JqueryJongosiView Answer on Stackoverflow
Solution 17 - JquerykievView Answer on Stackoverflow
Solution 18 - JqueryBilal JalilView Answer on Stackoverflow
Solution 19 - JquerymuhammadanishView Answer on Stackoverflow
Solution 20 - JqueryDayanand RupanavarView Answer on Stackoverflow