JavaScript 无法在 JSP 中正确生成 HTML

Question

我正在使用 javascript 在 jsp 页面中动态生成一些选择。该代码运行良好。但我遇到了一个问题，不知道如何处理。嗯，这是 JavaScript 代码:

 $('#addRow').click(function(){

        i++;

        //stuff categories
        var categoriesStr = '${stuffCategoriesListStr}';
        categoriesStr = categoriesStr.replace('[', '');
        categoriesStr = categoriesStr.replace(']', '');
        var categoriesList = categoriesStr.split(', ');

        var selectCategoriesHtml = "<select id='category"+i+"' style='width: 200px;' onchange=\"retrieveUrlAjax('ajaxstuff.action?category='+this.value, 'menusCombobox"+i+"')\"><option value='-1'>-- Select category --</option>";

        for (j = 0; j < categoriesList.length; j++) {

            var option = "<option value='"+categoriesList[j]+"'>"+categoriesList[j]+"</option>";
            selectCategoriesHtml += option;
        }

        selectCategoriesHtml += "</select>";
        //end os stuff categories

        //units list
        var unitsStr = '${unitsListStr}';
        unitsStr = unitsStr.replace('[','');
        unitsStr = unitsStr.replace(']','');
        var unitsList = unitsStr.split(', ');            

        var selectUnitsHtml = "<select id='unit+"+i+"' style='width: 200px;'><option value='-1'>-- Select unit --</option>";

        for (j = 0; j < unitsList.length; j++) {

            var option = "<option value='"+unitsList[j]+"'>"+unitsList[j]+"</option>";
            selectUnitsHtml += option;
        }

        selectUnitsHtml += "</select>";
        //end of units list

        var d = document.getElementById("fields");
        d.innerHTML += "<table width='100px'>\n\
                            <tr>\n\
                                <td>"+selectCategoriesHtml+"</td>\n\
                                <td width='100px;'><div class='menusCombobox"+i+"'><select style='width: 200px;'/></div></td>\n\
                                <td width='1%'><input type='text' style='width: 40px;' id='"+i+"' value='1'/></td>\n\
                                <td width='200px'>"+selectUnitsHtml+"</td>\n\
                            </tr>\n\
                        </table>";
    });        

这是 div:

 <div id="fields"></div>

结果:

1 个屏幕:http://img199.imageshack.us/img199/4662/screenshot1hrpl.png

2屏:http://img827.imageshack.us/img827/5717/screenshot2hn.png

问题是，当我在第一行中选择某些内容，然后添加另一行时，所选第一行中的所有数据都会被重置。您可以在第一个和第二个屏幕中看到这一点。我认为问题出在innerHTML中，但我还没有找到其他替代方案。也许你们可以帮助我。

Answer 1

我认为是 innerHTML 导致了您的问题，看看这个问题 -

Is it possible to append to innerHTML without destroying descendants' event listeners?

当您使用 jQuery 时，您可以使用类似 append 的东西吗？或after相反？