Question

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!

Answer 1

Try using .click instead of .change.