动态添加的SELECT元素不会在Internet Explorer中触发onchange事件

时间:2009-07-17 17:40:27

标签: javascript html internet-explorer

据我所知,这只是在Internet Explorer中被破坏了。我有一个脚本可以创建多个动态< select>元素并为它们添加onchange事件。 onchange事件在Firefox中触发没有问题,但在Internet Explorer中它永远不会触发。使用开发人员工具栏我看到DOM列出了正确的事件,它永远不会触发。我把问题归结为以下代码:

<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>

静态警报消息正常,但动态消息在Internet Explorer中不起作用。我几乎肯定我在其他地方见过这项工作,但我似乎无法找到其他例子。有没有人看到/知道如何让它发挥作用?

2 个答案:

答案 0 :(得分:11)

变化:

se.setAttribute("onchange", "alert('Dynamic')");

为:

se.setAttribute("onchange", function(){alert('Dynamic')});

甚至更短:

se.onchange = function(){alert('Dynamic')};

答案 1 :(得分:1)

我在解雇事件IE9之后从http://jehiah.cz/a/firing-javascript-events-properly和页面重新加载(在更改时触发了服务器端操作)的解决方案,然后工作。我不确定早期版本的IE。休息它适用于Chrome和FF。

    function fireEvent(element,event){
    if (document.createEventObject){
        // dispatch for IE
        var evt = document.createEventObject();
        element.fireEvent('on'+event,evt);
        javascript:location.reload(true);
    }
    else{
    // dispatch for firefox + others
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent(event, true, true ); // event type,bubbling,cancelable
        return !element.dispatchEvent(evt);
    }
}