javascript - 为什么这一小段 jQuery 会搞乱我的 JavaScript 的其余部分？

Question

我的页面上有一个区域包含表格数据。我正在尝试添加每行中值的内联编辑。我尝试过 jqGrid，但它无法满足我的需求。因此，我正在尝试“自制”版本的内联编辑。我的表很简单:

<table>
    <tbody>
        <tr id="row0" onClick="changeMe(this);">
            <td>
                some value
            </td>
            <td>
                some other value
            </td>
            <td>
                ...
            </td>
        </tr>
        <tr id="rowN" onClick="changeMe(this);">
            <td>
                ...
            </td>
        </tr>
    </tbody>
</table>

当用户单击 TR 上的任意位置时，我希望我的 JavaScript 将所有静态文本更改为正确的表单输入。表单的前两个元素是选择框。需要先填写第一个框，然后第二个框的选项才可用。以下是我用来完成此任务的 JavaScript 的一部分:

function changeMe(row){
    var serviceArray = ["option_1-1","option_1-2","option_1-3","option_1-4","option_1-5"]
    for(var i=0; i<2; i++){
        if(row.children[i].children.length == 0){
            var selectBox = document.createElement("select");
            var.setAttribute("id",serviceArray[i]);
            var.setAttribute("name",serviceArray[i]);

            switch(i){
                case 0:
                    $.getJSON("./dataGetter.php?qid=" + Math.random(),function(data){
                        $.each(data,function(key,value){
                            var option = document.createElement("option");
                            var innerValue = document.createTextNode(value);
                            option.appendChild(innerValue);
                            option.setAttribute("value",value);
                            selectBox.appendChild(option);
                        });
                    });
                    selectBox.setAttribute("onChange","someFunction(this.value)");
                    break;
                case 1:
                    selectBox.setAttribute("onChange","someOtherFunction(this.value)");
                    var option = document.createElement("option");
                    option.setAttribute("selected","selected");
                    option.setAttribute("disabled","disabled");
                    var textNode = document.createTextNode("\u2190 choose that first");
                    option.appendChild(textNode);
                    selectBox.appendChild(option);
                    break;
            }
            row.children[i].innerHTML = null;
            row.children[i].appendChild(selectBox);
        }
    }
}

这就是我的问题所在。当用户单击 TR 时，TR 的子 0(即带有文本的 TD)应转换为适当的选择框，并填充数据库中的适当数据。然而，这并没有发生。发生的情况是，TR 的子级 1(即第二个 TD)被转换。

作为测试，我向函数添加了一个新的测试数组:

var testArray = new Array("option_2-1","option_2-2","option_2-3","option_2-4","option_2-5");

并将我的 JavaScript 更改为以下内容:

function changeMe(row){
    var serviceArray = ["option_1-1","option_1-2","option_1-3","option_1-4","option_1-5"];
    var testArray = new Array("option_2-1","option_2-2","option_2-3","option_2-4","option_2-5");
    for(var i=0; i<2; i++){
        if(row.children[i].children.length == 0){
            var selectBox = document.createElement("select");
            var.setAttribute("id",serviceArray[i]);
            var.setAttribute("name",serviceArray[i]);

            switch(i){
                case 0:
                    $.each(testArray,function(key,value){
                        var option = document.createElement("option");
                        var innerValue = document.createTextNode(value);
                        option.appendChild(innerValue);
                        option.setAttribute("value",value);
                        selectBox.appendChild(option);
                    });
                    selectBox.setAttribute("onChange","someFunction(this.value)");
                    break;
                case 1:
                    selectBox.setAttribute("onChange","someOtherFunction(this.value)");
                    var option = document.createElement("option");
                    option.setAttribute("selected","selected");
                    option.setAttribute("disabled","disabled");
                    var textNode = document.createTextNode("\u2190 choose that first");
                    option.appendChild(textNode);
                    selectBox.appendChild(option);
                    break;
            }
            row.children[i].innerHTML = null;
            row.children[i].appendChild(selectBox);
        }
    }
}

当我进行此更改时，TR 的第一个 TD(子 0)会按应有的方式更改。

当我在浏览器中直接进入 dataGetter.php 页面时，我得到了正确的数据:

["option_2-1","option_2-2","option_2-3","option_2-4","option_2-5"]

我知道这是正确的数据，因为我输入了“alert();”就在“$.each”行之后，警报弹出窗口中显示了正确的数据。

所以，我不确定这里发生了什么。看起来就像一行

$.getJSON("./dataGetter.php?qid=" + Math.random(),function(data){
}

搞乱了我的 switch 语句，并用子 0 和子 1 数据填充第二个 TD(子 1)。这几乎就像“case 0”中的“break”被删除，所有逻辑都落到了第二种情况。

更新:如果我添加行“alert(i);”在我的 for 循环之后，一切都会正常工作......除了烦人的弹出窗口。

Answer 1

对于所有感兴趣的人，我已经解决了这个问题。看起来我的 switch 语句在 AJAX 返回之前就完成了。因此，我将“async”设置为“false”，一切正常。