我对Prototype JS (v1.7)还比较陌生,而且我被困在了一些东西上。我试图检测单选按钮的选择何时发生更改。下面是代码:
单选按钮:
<input class="amounts" type="radio" name="amount" id="amount-1" value="1" />
<input class="amounts" type="radio" name="amount" id="amount-2" value="2" />
<input class="amounts" type="radio" name="amount" id="amount-3" value="3" />
Javascript:我试了一试,这是行不通的:
Event.observe($$('amounts'), 'change', function(event) {
alert('change detected');
});
当表单加载时,不检查单选按钮。我希望Javascript能够检测到这些事件:
任何帮助都将不胜感激。
发布于 2011-03-10 03:38:30
它不能工作,因为$$
返回一个元素数组,而Event
只需要一个元素。另外,$$('amounts')
不匹配任何元素,也没有<amounts>
标记。
一个更好的方法是使用一个易于识别的祖先元素。
<form id="amounts-form">
<input class="amounts" type="radio" name="amount" id="amount-1" value="1" />
<input class="amounts" type="radio" name="amount" id="amount-2" value="2" />
<input class="amounts" type="radio" name="amount" id="amount-3" value="3" />
</form>
现在有一个唯一的ID可以使用,我们可以使用Event.on
$('amounts-form').on('change', '.amounts', function(event) {
alert('change detected');
});
注意,事件是由'.amounts'
过滤的,句点说要使用类名。
如果您正在使用FireBug开发FireFox或Chrome的开发工具,那么您可以直接在控制台中测试脚本的部分内容。通过键入$$('.amounts')
来确定选择器是否与您认为是的元素相匹配,这真的很有帮助。
发布于 2011-03-17 12:02:56
Alterne格罗的回答试图使用迭代器将事件处理程序直接附加到“an”无线电元素,但由于以下几个原因无法工作:
这一项应能发挥作用:
$$("[id^=amount-]").invoke(
'on',
'change',
function(){alert("hello " + this.id)}
)
(YMMV在事件处理程序中使用"this“。我只检查了Firefox中的代码
发布于 2011-03-09 22:00:03
更有效的方法是只给这些复选框相同的类,但你也可以尝试
$("id^=amounts-").change(function(){alert("blah blah")})
https://stackoverflow.com/questions/5255911
复制