Javascript-输入不保留值？

Question

I have table in a razor-generated View . A search box allows users to perform (you guessed it) a search operation by POSTing an AJAX request to a specified controller. The returned result is a PartialView (containing the new table + a pager) and I replace the existing table+pager with it.

There is also a button to add rows (with two input fields + a save button) to the table. I want to "persist" those rows locally before the search is performed and then append them back to the table once I get the results from the AJAX request.

In my script you can see that I find all the "unsaved" rows (class .new-element-row ) and add them to an array before sending the search request. Then, after replacing the existing table with the new one, I append them again to the table:

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();
                    (...)
                }
            });

        });
});

It almost works well (ie rows are saved and appended again), if it wasn't for the fact that the input fields of the re-appended rows don't keep the text that I had inputted.

What am I doing wrong? I'm probably missing something obvious, but I can't find out what it is.

Answer 1

The problem is that you are pushing back not the element itself, but its HTML. If you enter something into the text input, its HTML code does not change, although the DOM object sure does.

Not sure why you are using outerHTML here, but it seems that the simpliest fix is to remove it and just append the elements:

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