Назначение функции с использованием Prototype Event.Observe не работает в IE (7) - PullRequest
Новая
       20

Назначение функции с использованием Prototype Event.Observe не работает в IE (7)

1 голос
/ 12 августа 2011

надеюсь, вы можете помочь. Я построил страницу с формой на ней с группой переключателей, и я хочу назначить функцию onClick для каждой, которая изменит стиль и выделит, какое радио выбрано. Это работало в старой версии кода, которая использовала непосредственно назначенные события onClick, но при обновлении мне нужно изменить их на функции, назначенные во время выполнения с помощью системы событий. Я использую Prototype 1.6.0.1 и следующий код отлично работает в FF, но не в IE:

HTML: 

<form name="the_form" onsubmit="investmentPreApply(); return false;" id="the_form">
   <fieldset class="investment-apply-box1">
      <label for="cautious" id="cautiousLabel" class="isa-option">
         <input type="radio" id="cautious" name="radios" value="cautious" />Cautious Portfolio
      </label>
      <label for="balanced" id="balancedLabel" class="isa-option">
         <input type="radio" id="balanced" name="radios" value="balanced" />Balanced Portfolio
      </label>
      <label for="adventurous" id="adventurousLabel" class="isa-option">
         <input type="radio" id="adventurous" name="radios" value="adventurous" />Adventurous Portfolio
      </label>
      <label for="mixed" id="mixedLabel" class="isa-option">
         <input type="radio" id="mixed" name="radios" value="mixed" />Invest in a bit of each
      </label>
      <div class="isa-body-text-hidden" id="error-text">Please choose your ISA above</div>
   </fieldset>
   <div class="investment-apply-box2">

      <!--Lots more HTML here-->

   </div>
</form>

JS: 

findInvestmentPreApply: function() {
   if ($('investment') && $('the_form')) {
      var formItems = $$('.isa-option input');
      formItems.each(function(s,i){
         Event.observe(s, 'click', function() {highlightRadioChoice(s.id)});
      })
   }
},

Я пробовал разные комбинации добавления .bind (this) и .bindAsEventListener без какого-либо успеха.

Исходный код, который работал, выглядел примерно так: 

<label for="cautious" id="cautiousLabel" class="isa-option">
   <input type="radio" id="cautious" name="radios" value="cautious" onclick="highlightRadioChoice('cautious');" />Cautious Portfolio
</label>

и вызванная функция highlightRadioChoice не изменилась.

Если это помогает, функция highlightRadioChoice находится в файле js, отличном от кода события, который сам находится в файле функций js, которые выполняются при загрузке страницы для достижения подхода прогрессивного улучшения. Я не могу не думать, что если я переместу функцию highlightRadioChoice в файл, который запускается при загрузке, он будет работать нормально (т. Е. Вызовет this.highlightRadioChoice (...)), но это будет означать изменение всей загрузки других страниц, которые мы делаем не хочу на этом этапе.

Помогите мне, пожалуйста, StackOverflow!

======== EDIT =========

С некоторой помощью Epoch я обнаружил, что эта довольно сложная функция работает как в IE, так и в FF: 

findInvestmentPreApply: function() {
   if ($('investment') && $('the_form')) {
      var formItems = $$('.isa-option');
      formItems.each(function(s){
         s.observe('click', function() {highlightRadioChoice(s.id.substring(0,s.id.indexOf('Label')))});
      })
   }
},

Все еще не уверен, почему это должно работать, а мой предыдущий код не будет.

1 Ответ

0 голосов
/ 12 августа 2011

Это работает в ie7, так что у вас есть конкретная ошибка?

моя скрипка

...