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

【问题标题】：Dynamically added SELECT element does not fire onchange event in Internet Explorer动态添加的 SELECT 元素不会在 Internet Explorer 中触发 onchange 事件
【发布时间】：2009-07-17 17:40:26
【问题描述】：

据我所知，这仅在 Internet Explorer 中被破坏。我有一个创建多个动态

<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 中没有任何作用。我几乎肯定我在其他地方看到过这项工作，但我似乎找不到其他例子。有没有人看到/知道如何让它发挥作用？

【问题讨论】：

标签： javascript html internet-explorer

【解决方案1】：

变化：

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

到：

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

甚至更短：

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

【讨论】：

或者使用JQuery来绑定事件/触发器:)
原始问题使用 JQuery，并且试图将事件视为标准属性是问题的一部分。为什么 IE 不只是解析字符串是一个主要的痛苦......
是的，我在尝试使用 jQuery 的 .attr() 函数分配 onchange 事件时遇到了问题。 elem.onchange = function() { blah; 的直接 DOM 赋值} 对我来说效果很好。
我知道这是旧的，但是您的se.setAttribute("onchange", function(){alert('Dynamic')}); 解决方案不正确，尽管最后一个是正确的。当您使用.setAttribute() 时，该值将转换为字符串，该字符串将成为正在创建的函数的主体。因此，您的函数体在调用时最终会导致 SyntaxError，因为它将被解释为没有名称的函数声明。所以se.setAttribute("onchange", "alert('Dynamic')"); 是使用.setAttribute() 的正确方式，虽然它在IE 中可能有问题。

【解决方案2】：

在触发事件 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);
    }
}

【讨论】：