动态添加的SELECT元素不会在Internet Explorer中触发onchange事件 [英] Dynamically added SELECT element does not fire onchange event in Internet Explorer
问题描述
< html>
< head>
< script language =javascript>
function addSelect（）{
var se = document.createElement（'select'）;
se.setAttribute（onchange，alert（'Dynamic'））;
se.options [0] =新选项（1，1）;
se.options [1] =新选项（2，2）;
se.options [2] =新选项（3，3）;
se.options [3] =新选项（4，4）;
var plh = document.getElementById（ph）;
plh.appendChild（se）;
}
< / script>
< / head>
< body onload =addSelect（）>
< select name =somethingonchange =alert（'Static'）>
< optgroup label =set1>
< option value =1> 1< / option>
< option value =2> 2< / option>
< / optgroup>
< optgroup label =set2>
< option value =3> 3< / option>
< option value =4> 4< / option>
< / optgroup>
< / select>
< div id =ph>
< / div>
< / body>
< / html>
静态警报消息正常，但动态警报消息在Internet Explorer中不起作用。我几乎肯定我在其他地方看过这个工作，但我似乎找不到其他例子。是否有人看到/知道一种方法来实现这个目标？
更改：
se.setAttribute（onchange，alert（'Dynamic'））;
到：
se.setAttribute（onchange，function（）{alert（'Dynamic'）}）;
甚至更短：
se.onchange = function（）{alert（'Dynamic'）};
As far as I can tell this only is only broken in Internet Explorer. I have a script that creates multiple dynamic <select> elements and adds an onchange event for them. The onchange event fires in Firefox with no problem but in Internet Explorer it never fires. Using Developer Toolbar I see the DOM has the correct event listed, it just never fires. I've boiled down the problem to the following code:
<html>
<head>
<script language="javascript">
function addSelect() {
var se = document.createElement('select');
se.setAttribute("onchange", "alert('Dynamic')");
se.options[0] = new Option("1", "1");
se.options[1] = new Option("2", "2");
se.options[2] = new Option("3", "3");
se.options[3] = new Option("4", "4");
var plh = document.getElementById("ph");
plh.appendChild(se);
}
</script>
</head>
<body onload="addSelect()">
<select name="something" onchange="alert('Static')">
<optgroup label="set1">
<option value="1">1</option>
<option value="2">2</option>
</optgroup>
<optgroup label="set2">
<option value="3">3</option>
<option value="4">4</option>
</optgroup>
</select>
<div id="ph">
</div>
</body>
</html>
The static alert message comes up fine, but the dynamic one doesn't do anything in Internet Explorer. I'm nearly positive I've seen this work elsewhere, but I can't seem to find other examples. Does anybody see/know of a way to get this to work?
Change:
se.setAttribute("onchange", "alert('Dynamic')");
to:
se.setAttribute("onchange", function(){alert('Dynamic')});
or even shorter:
se.onchange = function(){alert('Dynamic')};
这篇关于动态添加的SELECT元素不会在Internet Explorer中触发onchange事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
