Javascript - 输入不保留值？

我在剃刀生成的View表中。搜索框允许用户通过向指定控制器发送AJAX请求来执行（您猜对了）搜索操作。返回的结果是PartialView（包含新的表+分页器），我用它替换现有的表+分页器。Javascript - 输入不保留值？

还有一个按钮用于向表中添加行（带有两个输入字段+保存按钮）。我想在执行搜索之前在本地“坚持”这些行，然后在我从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(); 
        (...) 
       } 
      }); 

     }); 
});

它几乎运行良好（即行保存，再次追加），如果它不是一个事实，即重新添加的行的输入字段不保留我输入的文本。

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

来源

2014-03-19 user1987392

问题是，你推回的不是元素本身，而是它的HTML。如果你在文本输入中输入了一些东西，它的HTML代码不会改变，尽管DOM对象确实如此。

不知道为什么你正在使用outerHTML这里，但似乎simpliest解决方法是删除它，只是追加要素：

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

来源

2014-03-19 11:11:27 Andrei

没错，就是这样，我知道它是简单的东西。我有outerHTML因为以前我（错误地）试图直接追加到$（“＃tableBody”），它只会这样工作。在至少5分钟的间隔后标记为接受，谢谢！ – user1987392

Javascript - 输入不保留值？

回答

相关问题