Javascript Issue with IE 7 + 8

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.

 jQuer开发者_如何学运维y(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?

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/).

var firstFader = forms[4].getElementsByTagName('input')[0];
var secondFader = forms[6].getElementsByTagName('input')[0];

I see you're not actually clicking the input elements, but the label elements for those inputs.

It seems IE doesn't properly propagate the click event to the hidden input, therefor your .click() event never gets executed.

See also: IE - hidden radio button not checked when the corresponding label is clicked

The simple solution would to not bind the click() events to the input but to the label instead.

It looks to me like in IE7, the radio button input object has zero size and the label for it is what actually receives the click and displays the radio button. Perhaps you need to intercept clicks on the associated label in addition to the input field.