Question

当我点击添加按钮时，它会使之前的值消失。如果我单击第一次添加并在第一个输入框中输入值的示例。然后单击添加按钮，使之前的值从输入框中消失

  function addInput(event) {
    var field =
      '<div class="form-group"><input type="text" class="form-control" name="selected_text" placeholder="Selected Text"></div>' +
      '<div class="form-group"><input type="text" class="form-control" name="selected_route_url" placeholder="Route Url for selected text"></div>' +
      '<div class="form-group"><input type="text" class="form-control" name="unselected_text" placeholder="UnSelected Text"></div>' +
      '<div class="form-group"><input type="text" class="form-control" name="unselected_route_url" placeholder="Route Url for unselected text"></div>'
    document.getElementById('inputField').innerHTML += field;
    event.preventDefault();
  }

<div class="form-group">
    <a class="btn btn-primary pull-left" onclick="addInput(event)">Add</a>
</div>
<div id="inputField" style="background-color:#eceff1;">
</div>

Answer 1

向innerHTML添加元素会事先重新加载整个元素。这就是价值重置的原因。

您可以尝试使用insertAdjacentHTML功能。然后这一行

document.getElementById('inputField').innerHTML += field;

将成为此

document.getElementById('inputField').insertAdjacentHTML('beforeend', field);

代码段：

  function addInput(event) {
    var field =
      '<div class="form-group"><input type="text" class="form-control" name="selected_text" placeholder="Selected Text"></div>' +
      '<div class="form-group"><input type="text" class="form-control" name="selected_route_url" placeholder="Route Url for selected text"></div>' +
      '<div class="form-group"><input type="text" class="form-control" name="unselected_text" placeholder="UnSelected Text"></div>' +
      '<div class="form-group"><input type="text" class="form-control" name="unselected_route_url" placeholder="Route Url for unselected text"></div>'
    document.getElementById('inputField').insertAdjacentHTML('beforeend', field);
    event.preventDefault();
  }

<div class="form-group">
    <a class="btn btn-primary pull-left" onclick="addInput(event)">Add</a>
</div>
<div id="inputField" style="background-color:#eceff1;">
</div>

来源：this similar answer

Answer 2

我完全将程序转换为 jquery 及其工作..

 $("#link").click(function() {
   var field =
     '<div class="form-group"><input type="text" class="form-control" name="selected_text" placeholder="Selected Text"></div>' +
     '<div class="form-group"><input type="text" class="form-control" name="selected_route_url" placeholder="Route Url for selected text"></div>' +
     '<div class="form-group"><input type="text" class="form-control" name="unselected_text" placeholder="UnSelected Text"></div>' +
     '<div class="form-group"><input type="text" class="form-control" name="unselected_route_url" placeholder="Route Url for unselected text"></div>';
   $('#inputField').append(field);
   event.preventDefault();

 });

<强> HTML

<div class="form-group">
  <a class="btn btn-primary pull-left" id="link">Add</a>
</div>
<div id="inputField" style="background-color:#eceff1;">
</div>

Fiddle

再次单击该按钮使字段重置

2 个答案: