Dynamically added SELECT element does not fire onchange event in Internet Explorer

Question

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?

score 11 · Accepted Answer · answered Jul 17 '09 at 17:45

11

Change:

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

to:

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

or even shorter:

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

answered Jul 17 '09 at 17:45

Crescent Fresh

115,249
25
154
140

Or use JQuery to bind the event/trigger :) – o.k.w Jul 17 '09 at 18:02
the original issue uses JQuery, and trying to treat the events as standard attributes was part of the problem. Why IE doesn't just parse the strings is a major pain... – Agent_9191 Jul 17 '09 at 18:09
Yep, I had issues when trying to use jQuery's .attr() function to assign an onchange event. The direct DOM assignment of elem.onchange = function() { blah; } worked nicely for me. – kdawg Oct 07 '10 at 17:00
1

I know this is old, but your `se.setAttribute("onchange", function(){alert('Dynamic')});` solution is incorrect, though the last one is right. When you use `.setAttribute()`, the value is converted to a string, which becomes the body of the function being created. So your function body will end up causing a SyntaxError when invoked because it will be interpreted as a function declaration without a name. So `se.setAttribute("onchange", "alert('Dynamic')");` is the right way to use `.setAttribute()`, though it may be buggy in IE. – cookie monster Jul 28 '14 at 19:02

score 1 · Answer 2 · answered Dec 15 '11 at 06:04

I took the solution from http://jehiah.cz/a/firing-javascript-events-properly and page reload (there is server side operation triggered through on change) after firing the event IE9, which then worked. I am not sure about earlier version of IE. Rest it works for Chrome and 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);
    }
}

Dynamically added SELECT element does not fire onchange event in Internet Explorer

2 Answers2

Linked