Question

我在剃刀生成的View中有表格。搜索框允许用户通过将AJAX请求发布到指定的控制器来执行（您猜对了）搜索操作。返回的结果是PartialView（包含新表+一个寻呼机），我用它替换现有的表+ pager。

还有一个按钮可以向表中添加行（带有两个输入字段+一个保存按钮）。我希望在执行搜索之前在本地“持久化”这些行，然后在从AJAX请求获得结果后将它们追加到表中。

在我的脚本中，您可以看到我找到所有“未保存”的行（类.new-element-row）并在发送搜索请求之前将它们添加到数组中。然后，在用新的表替换现有表之后，我再次将它们附加到表中：

newElements = new Array(); // unsaved rows

$(document).ready(function () {

        $('#searchbox').keyup(function () {

            var keyWords = $("#searchbox").val();

            ////////////////////////////////////////////////
            // Persist the non-saved rows///////////////////
            $("tr.new-element-row").each(function () {
                $this = $(this);
                var elem = $this[0];
                newElements.push(elem);
            });
            ////////////////////////////////////////////////

            // Send the search request
            $.ajax({
                url: '@(Url.Action("ActionName", "ControllerName"))',
                data: 'searchString=' + keyWords,
                cache: false,
                success: function (html) {

                    // Replace table with the one from the search results
                    $("#tableContainer").html(html);

                    ////////////////////////////////////////////////
                    // Re-append the unsaved rows to the new table//
                    newElements.forEach(function (entry) {
                        $("#table").append(entry.outerHTML);
                    });
                    ////////////////////////////////////////////////

                    // Clear...
                    newElements = new Array();
                    (...)
                }
            });

        });
});

它几乎运行良好（即行保存并再次附加），如果不是因为重新附加的行的输入字段不保留我输入的文本。

我做错了什么？我可能错过了一些明显的东西，但我找不到它是什么。

Answer 1

问题是你不是推回元素本身，而是它的HTML。如果在文本输入中输入内容，则其HTML代码不会更改，尽管DOM对象确实如此。

不确定为什么在这里使用outerHTML，但似乎最简单的解决方法是删除它并只是附加元素：

newElements.forEach(function (entry) {
    $("#table").append(entry);
});

Javascript - 输入不保持值？

1 个答案: