Question

我有一个基于我遇到过的问题的测试页：

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

在FireFox中，这可以像我期望的那样工作：每个新选择都有三个选项创建;选择一个会创建一个包含三个选项的新选择。

但在Chrome中，它会在第二个选择中停止。也就是说，新创建的选择似乎没有获得onclick功能。第一个选择愉快地创造了更多选择，但这不是我正在寻找的。

Safari表现得像Chrome，但这是预期的，对吧？我尝试过jQuery版本，但它也没有用。任何人都可以帮助我吗？

Answer 1

将更改处理程序绑定到select元素，而不是选项上的单击处理程序。所以这个：

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

而不是：

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

小提琴：https://jsfiddle.net/c1kmtnfd/

Javascript：为儿童添加功能：FireFox与Chrome

1 个答案: