Javascript: Append Children With Functions: FireFox vs Chrome

Question

I have a test page based on a problem I've been experiencing:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            #selectDiv { display: inline; }
        </style>
        <script type="text/javascript">
            function changeOption(args) {
                var sel = document.createElement("select");
                var opt1 = document.createElement("option");
                var opt2 = document.createElement("option");
                var opt3 = document.createElement("option");
                opt1.value = "opt1";
                opt1.appendChild(document.createTextNode("Option 1"));
                sel.appendChild(opt1);
                opt2.value = "opt2";
                opt2.appendChild(document.createTextNode("Option 2"));
                sel.appendChild(opt2);
                opt3.value = "opt3";
                opt3.appendChild(document.createTextNode("Option 3"));
                sel.appendChild(opt3);

                // working on FireFox, not on Chrome
                opt1.onclick = function() {changeOption()}
                opt2.onclick = function() {changeOption()}
                opt3.onclick = function() {changeOption()}

                document.getElementById("selectDiv").appendChild(sel);
            }
        </script>
    </head>
    <body>
        <h1>This is a test.</h1>
        <div id="selectDiv">
        <select id="test_select1" onchange="changeOption()">
            <option value="opt1">Option 1</option>
            <option value="opt2">Option 2</option>
            <option value="opt3">Option 3</option>
        </select>
        </div>
    </body>
</html>

In FireFox, this works as I would expect: each new select is created with three options; selecting one creates a new select with three options.

But in Chrome, it stops on the second select. That is, the newly created select doesn't seem to get the onclick function. The first select happily creates more selects, but that isn't what I'm looking for.

Safari behaves like Chrome but that's to be expected, right? I've tried a jQuery version, but it doesn't work either. Can anyone help me out here?

This likely has something to do with how the browsers handle pointing to event handlers. You can fix this by using a delegate listening to the selectDiv. I'm not sure if you are using jQuery or not so the implementation will vary. — Sinistralis, Jul 17 '15 at 17:59
"it stops on the second select", the first select works because you built in html. — Octopus, Jul 17 '15 at 18:06
See also, [this question](http://stackoverflow.com/questions/1402227/click-event-on-select-option-element-in-chrome) — Octopus, Jul 17 '15 at 18:11

score 1 · Accepted Answer · answered Jul 17 '15 at 18:03

1

Bind a change handler to the select element, not a click handler on the options. So this:

sel.onchange = function(){
   changeOption();
}

Instead of:

opt1.onclick = function() {changeOption()}
opt2.onclick = function() {changeOption()}
opt3.onclick = function() {changeOption()}

Fiddle: https://jsfiddle.net/c1kmtnfd/

answered Jul 17 '15 at 18:03

Ryan Neuffer

782
4
8

You haven't explained why. Why don't the onclick events work in Chrome? – Octopus Jul 17 '15 at 18:08
For starters, it's bad practice. A click event wouldn't be triggered if I tabbed and changed the option with my keyboard—a change event on the select would. I'm looking for a specification of Chrome implementation of onclick. – Ryan Neuffer Jul 17 '15 at 18:13
I haven't found any official documentation from Chrome; however, attaching an onchange handler to the select is definitely more reliable cross browser. Here's a table of implemented events on the option element across different browsers: http://webbugtrack.blogspot.ca/2007/11/bug-280-lack-of-events-for-options.html – Ryan Neuffer Jul 17 '15 at 18:31
Yes it does. Go to the fiddle I posted in Firefox and Chrome and see for yourself. – Ryan Neuffer Jul 17 '15 at 18:43
Sorry, where is that? – Phil Smith Jul 17 '15 at 18:46
Hey it does work! But mine doesn't....Oh, you added the onchange() to the select, not the option...my mistake! – Phil Smith Jul 17 '15 at 18:47
Are you trying the solution in the code you posted, or in another code base? – Ryan Neuffer Jul 17 '15 at 18:49

Javascript: Append Children With Functions: FireFox vs Chrome

1 Answers1