再次單擊該按鈕以重置字段

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> 

資料來源： 這個類似的答案

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>

小提琴