javascript - addEventListener 在定义到新元素时不起作用

Question

我正在尝试创建一个提交按钮，该按钮将在单击另一个按钮时发送我创建的表单，但是 addEventListener 不起作用。

我将发布该片段，但由于某些样式问题，它可能看起来很糟糕(对此感到抱歉)。但问题是在我单击创建的新建 按钮后，它应该告诉我名称标签 输入中的值是什么，但它什么也没做。另外，当我声明它时，该函数似乎运行一次，为什么会这样？

顺便说一句，我是 javascript 的新手。

var numCuentas = 0;
var baseDeDatos = new Array();
var butCrear = document.getElementById('creacion');
var butMost = document.getElementById('mostrador');

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

/*function check(arr)
 {
			for(var i = 0; i<arr.length;i++)
			{
				if(arr[i].value)
			}
		}*/

function cuentaBancaria(nomb, apell, saldo) {
  var nombCuenta = nomb;
  var apellCuenta = apell;
  var saldoCuenta = saldo;
  var numeroDCuenta = numC;
  this.mostrarData = function() {

  }

}
butCrear.addEventListener("click", function() {
  butCrear.disabled = true;
  butMost.disabled = true;
  var newDiv = document.createElement('div');
  newDiv.setAttribute("id", "forms");
  var acheOne = document.createElement('h3');
  acheOne.textContent = "INGRESE SUS DATOS:";
  newDiv.appendChild(acheOne);
  var listForm = document.createElement('ul');

  var nameVal = ["nombre", "apellido", "saldo"];
  for (var i = 0; i < nameVal.length; i++) {
    var liNew = document.createElement('li');
    var inpNew = document.createElement('input')
    inpNew.setAttribute("type", "text");
    inpNew.setAttribute("autocomplete", "off");
    inpNew.setAttribute("name", nameVal[i]);
    inpNew.setAttribute("id", nameVal[i]);
    var labelNew = document.createElement('label');
    var upcas = nameVal[i].toUpperCase();
    labelNew.textContent = upcas + ': ';
    liNew.appendChild(labelNew);
    liNew.appendChild(inpNew);
    listForm.appendChild(liNew);

  }
  newDiv.appendChild(listForm);
  document.getElementById('container').appendChild(newDiv);
  var subBut = document.createElement('input');
  subBut.setAttribute("type", "button");
  subBut.setAttribute("id", "envio");
  subBut.setAttribute("value", "Confirmar");
  document.getElementById('saldo').parentNode.appendChild(subBut);
  subBut.addEventListener("click", validate(), false);

}, false);
butMost.addEventListener("click", function() {
  butCrear.disabled = true;
  butMost.disabled = true;
}, false)

function validate() {
  var subBut = document.getElementById("envio");
  var listInp = document.getElementById('forms').getElementsByTagName('input');
  alert(listInp[0].value);
  /*if(isNumber(listInp[2]))
			{
				alert("El saldo solo puede ser numerico");
			}
			else if(check(listInp))
			{
				alert("Son necesarios todo los valores pedidos para proceder");
			}
			else
			{

			}*/
}

div {
  border: 1px solid white;
  margin: auto;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
#container {
  color: white;
  width: 65%;
  min-height: 680px;
  background-color: #084D9C;
  font-family: 'Times New Roman', sans-serif;
}
#options,
#forms {
  margin-top: 15px;
  display: inline-block;
  background-color: #0a60c2;
}
#options {
  width: 28%;
  margin-left: 15px;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
#forms {
  margin-left: 10px;
  padding-left: 15px;
  margin-bottom: 10px;
  margin-right: 10px;
  vertical-align: top;
  width: 61%;
}
h1 {
  text-align: center;
}
li {
  list-style: none;
  margin-left: -4px;
}
input {
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 10px;
}
html {
  height: 100%;
}
label {
  width: 15%;
  padding-top: 5px;
  float: left;
  font-size: 13px;
  font-family: monospace;
  font-weight: bold;
}
input[type=button] {
  border: none;
  background-color: #ffff99;
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;
  width: 220px;
  height: 30px;
  border-radius: 3px;
}
input[type=button]:disabled {
  background-color: #bfbfbf;
  color: gray;
}
#envio {
  width: 30%;
  float: right;
}

<h1><img src="logonacion.png" alt="BANCO DE LA NACION ARGENTINA" style="width: 35%"></h1>
<div id="container">
  <div id="options">
    <h3>ELIGA SU OPERACION:</h3>
    <input type="button" name="crear" id="creacion" value="Crear nueva cuenta" autocomplete="off">
    <input type="button" name="mostrar" id="mostrador" value="Mostrar datos" autocomplete="off">
  </div>
</div>

Answer 1

问题是这一行:

subBut.addEventListener("click", validate(), false);

您尝试做的是将 validate 函数句柄传递给 addEventListener，但您实际上是通过添加 ()执行它。试试这个:

subBut.addEventListener("click", validate, false);

var numCuentas = 0;
var baseDeDatos = new Array();
var butCrear = document.getElementById('creacion');
var butMost = document.getElementById('mostrador');

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

/*function check(arr)
 {
			for(var i = 0; i<arr.length;i++)
			{
				if(arr[i].value)
			}
		}*/

function cuentaBancaria(nomb, apell, saldo) {
  var nombCuenta = nomb;
  var apellCuenta = apell;
  var saldoCuenta = saldo;
  var numeroDCuenta = numC;
  this.mostrarData = function() {

  }

}
butCrear.addEventListener("click", function() {
  butCrear.disabled = true;
  butMost.disabled = true;
  var newDiv = document.createElement('div');
  newDiv.setAttribute("id", "forms");
  var acheOne = document.createElement('h3');
  acheOne.textContent = "INGRESE SUS DATOS:";
  newDiv.appendChild(acheOne);
  var listForm = document.createElement('ul');

  var nameVal = ["nombre", "apellido", "saldo"];
  for (var i = 0; i < nameVal.length; i++) {
    var liNew = document.createElement('li');
    var inpNew = document.createElement('input')
    inpNew.setAttribute("type", "text");
    inpNew.setAttribute("autocomplete", "off");
    inpNew.setAttribute("name", nameVal[i]);
    inpNew.setAttribute("id", nameVal[i]);
    var labelNew = document.createElement('label');
    var upcas = nameVal[i].toUpperCase();
    labelNew.textContent = upcas + ': ';
    liNew.appendChild(labelNew);
    liNew.appendChild(inpNew);
    listForm.appendChild(liNew);

  }
  newDiv.appendChild(listForm);
  document.getElementById('container').appendChild(newDiv);
  var subBut = document.createElement('input');
  subBut.setAttribute("type", "button");
  subBut.setAttribute("id", "envio");
  subBut.setAttribute("value", "Confirmar");
  document.getElementById('saldo').parentNode.appendChild(subBut);
  subBut.addEventListener("click", validate, false);

}, false);
butMost.addEventListener("click", function() {
  butCrear.disabled = true;
  butMost.disabled = true;
}, false)

function validate() {
  var subBut = document.getElementById("envio");
  var listInp = document.getElementById('forms').getElementsByTagName('input');
  alert(listInp[0].value);
  /*if(isNumber(listInp[2]))
			{
				alert("El saldo solo puede ser numerico");
			}
			else if(check(listInp))
			{
				alert("Son necesarios todo los valores pedidos para proceder");
			}
			else
			{

			}*/
}

div {
  border: 1px solid white;
  margin: auto;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
#container {
  color: white;
  width: 65%;
  min-height: 680px;
  background-color: #084D9C;
  font-family: 'Times New Roman', sans-serif;
}
#options,
#forms {
  margin-top: 15px;
  display: inline-block;
  background-color: #0a60c2;
}
#options {
  width: 28%;
  margin-left: 15px;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
#forms {
  margin-left: 10px;
  padding-left: 15px;
  margin-bottom: 10px;
  margin-right: 10px;
  vertical-align: top;
  width: 61%;
}
h1 {
  text-align: center;
}
li {
  list-style: none;
  margin-left: -4px;
}
input {
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 10px;
}
html {
  height: 100%;
}
label {
  width: 15%;
  padding-top: 5px;
  float: left;
  font-size: 13px;
  font-family: monospace;
  font-weight: bold;
}
input[type=button] {
  border: none;
  background-color: #ffff99;
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;
  width: 220px;
  height: 30px;
  border-radius: 3px;
}
input[type=button]:disabled {
  background-color: #bfbfbf;
  color: gray;
}
#envio {
  width: 30%;
  float: right;
}

<h1><img src="logonacion.png" alt="BANCO DE LA NACION ARGENTINA" style="width: 35%"></h1>
<div id="container">
  <div id="options">
    <h3>ELIGA SU OPERACION:</h3>
    <input type="button" name="crear" id="creacion" value="Crear nueva cuenta" autocomplete="off">
    <input type="button" name="mostrar" id="mostrador" value="Mostrar datos" autocomplete="off">
  </div>
</div>