JavaScript Click EventListener只能工作一次

Question

我有一个数字输入，我想显示基于所选数字的输入。问题是单击事件只能工作一次。

这是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

好吧，根据@Lain的评论，innerHTML在重新解析时似乎丢失了处理程序，所以我更改了：

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

收件人：

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

Answer 2

这是因为您删除了使用.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;
}
}