【发布时间】：2011-10-25 16:11:35
【问题描述】：
希望您能提供帮助。我已经建立了一个页面，上面有一个带有一组单选按钮的表单，我想为每个单选按钮的 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！
========编辑=========
在 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')))});
})
}
},
仍然不确定为什么这应该有效，而我以前的代码不会。
【问题讨论】：
标签： internet-explorer events function prototypejs onload