我问了一个问题previously ，它以我提出的形式正确回答，但现在意识到为什么它对我不起作用。
我有这个代码来观察多个选择菜单:
$('product_options').select('select').invoke("observe","change",optchange);
正如所指出的，这确实适用于像这样的静态布局:
<html>
<head>
<title>optchange</title>
<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<div id="product_options">
<select id="o0">
<option>1</option>
<option>2</option>
</select>
<select id="o1">
<option>1</option>
<option>2</option>
</select>
<select id="o3">
<option>1</option>
<option>2</option>
</select>
</div>
<script type="text/javascript">
function optchange(e) {
alert("optchanged");
}
$('product_options').select('select').invoke("observe","change", optchange);
</script>
</body>
</html>
但在我的上下文中，在第一个选择菜单中进行选择会触发 Ajax.Updater，它完全替换了 Select 2 的内容 - 这会杀死事件观察者。有没有办法解决这个问题，而不必每次都应用新的事件观察器？
最佳答案
您在这里寻找的是事件冒泡 - 通过事件冒泡，您可以仅将一个事件处理程序分配给更高的元素，浏览器会将其子级上的所有事件沿链传递到其父级。你最终会得到更像这样的东西:
$('product_options').observe("change",function(event){optchange(event);});
function optchange(event){
console.log(Event.findElement(event, 'select'));
}
但是，这里有一些问题 - 根据this post select 事件在 IE6 中不会冒泡
关于javascript - 使用原型(prototype)观察注入(inject)元素上的事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2998433/