Проблема с JavaScript в IE 7 + 8

Question

Так что я пытался заставить этот скрипт работать в IE 7 и 8. Отсутствие поддержки getElementsByClassName было, мягко говоря, трудным, но я заполнил поддержку для этого библиотекой jQuery.

Моя проблема здесь заключается в том, что код не показывает ошибок ни в одном браузере, но код не работает должным образом в IE.Я проверял это в FF, Chrome и Safari.Все другие браузеры работают нормально, кроме IE.

Я знаю семантику, потому что код может быть меньше (Поверьте мне, когда он заработает, я исправлю это.) Но сейчас мне нужно выяснить, что удерживает 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');
    }); 
  });

Что этот код делает, это берет массив всех элементов формы, затем разбивает два конкретных элемента на их отдельные элементы ввода, когда при щелчке по одному из элементов он скрывает или показывает элемент div, содержащийинформация об этом конкретном состоянии.Есть идеи?

Answer 1

Ваши обработчики кликов не вызываются, потому что ваши <input> s имеют стиль display:none, то есть они скрыты.Современные браузеры снисходительны, потому что они видят <label for="id">, поэтому они запускают событие click, как будто это был сам ввод (см. http://jsfiddle.net/MMUyA/).

Answer 2

Мне кажется, как в IE7, объект ввода переключателя имеет нулевой размер, а метка для него - это то, что фактически получает щелчок и отображает переключатель. Возможно, вам нужно перехватывать щелчки на соответствующей метке в дополнение к полю ввода.

Answer 3

Я вижу, что вы на самом деле не щелкаете элементы input, а элементы label для этих входов.

Кажется, IE не распространяет событие click должным образом на скрытый ввод, поэтому ваше .click() событие никогда не будет выполнено.

См. Также: IE - скрытый переключатель не отмечен при нажатии на соответствующую метку

Простое решение состоит в том, чтобы не связывать события click() с input, а с label.

Answer 4

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