Question

So I’ve been trying to get this script working in IE 7 & 8. The lack of support for getElementsByClassName was difficult to say the least, but i have filled support for that with a jQuery library.

My issue here is that the code shows no errors in any browser, yet the code does not run properly in IE. I’ve tested this in FF, Chrome, and Safari. All other browsers work fine, excluding IE.

I know semantics wise the code could be smaller (Trust me when get it working i will fix that.) But for now i need to figure out what is holding up IE.

 jQuery(document).ready(function() {
    var forms = jQuery('.form_item');
    var firstFader = forms[4].getElementsByTagName('input');
    var secondFader = forms[6].getElementsByTagName('input'); 

    jQuery(firstFader[0]).click(function() {
      jQuery('#nearSighted').hide('slow');
      jQuery('#farSighted').show('slow');
      jQuery('#astigmatism').hide('slow');
    });

    jQuery(firstFader[1]).click(function() {
      jQuery('#nearSighted').show('slow');
      jQuery('#farSighted').hide('slow');
      jQuery('#astigmatism').hide('slow');
    });

    jQuery(firstFader[2]).click(function() {
      jQuery('#nearSighted').hide('slow');
      jQuery('#farSighted').hide('slow');
      jQuery('#astigmatism').show('slow');
    });

    jQuery(secondFader[2]).click(function() {
      jQuery('#presbyopia').show('slow');
      jQuery('#cataracts').hide('slow');
    });  

    jQuery(secondFader[3]).click(function() {
      jQuery('#presbyopia').hide('slow');
      jQuery('#cataracts').show('slow');
    }); 
  });

What this code does is take an array of all form items, then breaks two specific ones down into their individual input elements, when one of the elements is clicked it hides or shows a div that contains information about that specific condition. Any ideas?

Answer 1

Your click handlers aren’t being called because your <input>s are styled display:none, i.e. they’re hidden. Modern browsers are lenient because they see a <label for="id"> so they fire the click event as though it were the input itself (see http://jsfiddle.net/MMUyA/).