Question

希望你能提供帮助。我用一组单选按钮构建了一个带有表单的页面，我想为每个单独的onClick分配一个函数，它将改变样式并突出显示选择哪个单选按钮。这已经在使用直接分配的onClick事件的旧版本代码中工作，但在更新它时，我需要将这些更改为使用Event系统在运行时分配的函数。我正在使用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')))});
      })
   }
},

仍然不确定为什么这应该有效，而我以前的代码不会。

Answer 1

这适用于ie7所以你有特定的错误吗？

my fiddle

使用Prototype Event.Observe分配函数在IE中不起作用（7）

1 个答案: