JavaScript Click EventListener仅工作一次

Question

我有一个数字输入，我想根据所选数字显示输入。 问题是click事件只能运行一次。

这是HTML代码：

<div class="an-panel m-t-30 row" id="an-inputs-panel">
  <div class="col-md-12">
    <h4 class="text-center">Inputs</h4>
  </div>
  <div class="col-md-12 p-t-20">
    <div class="col-md-3 col-md-offset-4">
      <input type="number" id="inputs_number" min="2" max="5" value="2" class="form-control" placeholder="">
    </div>
    <div class="col-md-4">
      <a id="btn_add_input">Add</a>
    </div>
  </div>
</div>

JavaScript代码采用数字输入的值并循环遍历以创建新的输入：

window.onload = function() {
  // Add inputs
  var btn_input = document.getElementById('btn_add_input'),
    inputs_panel = document.getElementById('an-inputs-panel'),
    inputs_number = document.getElementById('inputs_number');

  btn_input.addEventListener("click", function() {
    alert(inputs_number.value);
    inputs_panel.innerHTML += createInputs(inputs_number.value);
  });

  function createInputs(length) {
    var inputs = "";
    for (var i = 0; i < length; i++) {
      inputs += `
        <div id="an-panel-container">
          <div class="col-md-12">
            <u><h5 class="text-center p-t-20">Input ` + (i + 1) + `</h5></u>
          </div>
          <div class="col-md-12 p-t-20">
            <div class="col-md-4 col-md-offset-2">
              <label>Field name</label>
              <input type="text" class="form-control">
            </div>
            <div class="col-md-4">
              <label>Input type</label>
              <select class="form-control">
                <option>text</option>
                <option>email</option>
                <option>phone</option>
                <option value="">number</option>
                <option value="">textarea</option>
              </select>
            </div>
          </div>
        </div>`;
    }
    return inputs;
  }
}

Answer 1

发生这种情况是因为您删除了具有使用.innerHTML绑定的事件的元素。 替换元素后，您需要再次绑定事件。

因此，代码应如下所示：（但有一个小错误。事件多次绑定到尚未删除的元素）

window.onload = function() {
  // Add inputs
  var btn_input = document.getElementById('btn_add_input'),
    inputs_panel = document.getElementById('an-inputs-panel'),
    inputs_number = document.getElementById('inputs_number');

  bindEvents();

  function bindEvents() {
    btn_input.addEventListener("click", function() {
      alert(inputs_number.value);
      inputs_panel.innerHTML += createInputs(inputs_number.value);
      bindEvents();
    });
  }

  function createInputs(length) {
    var inputs = "";
    for (var i = 0; i < length; i++) {
      inputs += `
        <div id="an-panel-container">
            <div class="col-md-12">
                <u><h5 class="text-center p-t-20">Input ` + (i + 1) + `</h5></u>
            </div>
            <div class="col-md-12 p-t-20">
                <div class="col-md-4 col-md-offset-2">
                    <label>Field name</label>
                    <input type="text" class="form-control">
                </div>
                <div class="col-md-4">
                    <label>Input type</label>
                    <select class="form-control">
                        <option>text</option>
                        <option>email</option>
                        <option>phone</option>
                        <option value="">number</option>
                        <option value="">textarea</option>
                    </select>
                </div>
            </div>
        </div>`;
    }
    return inputs;
  }
}

Answer 2

好吧，基于@Lain的评论，似乎当innerHTML被解析时，innerHTML会丢失处理程序，因此我进行了更改：

inputs_panel.innerHTML += createInputs(inputs_number.value);

至：

inputs_panel.insertAdjacentHTML('beforeend', createInputs(inputs_number.value));