Question

我正在创建一个能够动态添加输入框的网页，一切正常。但每当我添加一个新的输入框时，该字段上方添加的所有输入框中的值都会自动清除。

这是添加元素

时生成的html

＆＃13;

<div class="main_text_area" id="got_id_from_server">
  <p>Add Delay For :</p>
  <div class="remove_bg button btn" name="some_id_from_server"></div>
  <p>
    <div contenteditable class="text_im" placeholder="Enter Delay" id="some_id_from_server" onchange="post_delay(this)"></div>
  </p>
  <p>
    <input class="text_im" placeholder="Select" type="text" id="some_id_from_server" list="some_id_from_server" onchange="post_delay(this)">
    <datalist id="some_id_from_server">
      <option value="Minutes"></option>
      <option value="Hours"></option>
      <option value="Days"></option>
    </datalist>
  </p>
</div>

＆＃13;

Answer 1

出现这种情况是因为向您的Dom添加新元素会导致网站再次呈现视图。再次这样（在这种情况下）你输入到input-element中的“没有ID属性的输入字段”的存储值就会重置。

所以看看这两个代码片段：

var count = 0;

function createInput(event) {
  count++;
  document.body.innerHTML += "<input value='Input #"+ count + "' / >"
  event.preventDefault();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="createInput()">Create Input</button>

编辑：使用jQuery将是更好的解决方案，因此请查看此代码（为了防止重置您必须使用的输入字段"append()"。试一试独自一人！：

var count = 0;
$(function() {
  $("#createInput").click(function(event) {
    count++;
    $('form').append('<input type="text" value="Input #' + count + '" />');
    event.preventDefault();
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" name="myForm" accept-charset="utf-8">
<button id="createInput">Create Input</button>
</form>

动态添加的输入值在下次添加时消失

1 个答案: