Javascript 事件仅在应用于多个元素时触发一次
我正在用纯JS动态创建一个表单。每当最后一个输入字段收到输入时,应创建另一个空字段。另一方面,当最后一个字段之前的字段也变为空时,应删除最后一个字段 HTML(用户输入前):Javascript 事件仅在应用于多个元素时触发一次,javascript,html,events,dom-events,addeventlistener,Javascript,Html,Events,Dom Events,Addeventlistener,我正在用纯JS动态创建一个表单。每当最后一个输入字段收到输入时,应创建另一个空字段。另一方面,当最后一个字段之前的字段也变为空时,应删除最后一个字段 HTML(用户输入前): Javascript(随后实现;摘录): 函数addBox(){ var-box=document.getElementsByClassName(“eventBox”); var id=+getMaxID(框,“事件”)++1;//正在创建的输入的id var list=document.getElementById
Javascript(随后实现;摘录):
函数addBox(){
var-box=document.getElementsByClassName(“eventBox”);
var id=+getMaxID(框,“事件”)++1;//正在创建的输入的id
var list=document.getElementById(“事件列表”);
list.innerHTML=list.innerHTML+'
';
document.getElementById(“事件”+id).addEventListener(“输入”,resizeEventList);
}
函数delBox(){
loadText();//保存当前输入
var list=document.getElementById(“事件列表”);
document.getElementById(“eventList”).innerHTML='';
var-id=1;
对于(var i=1;i0){
/*使用以前的输入重新创建框(如果不是空的)*/
document.getElementById(“事件列表”).innerHTML=document.getElementById(“事件列表”).innerHTML+'
';
document.getElementById(“事件”+id).addEventListener(“输入”,resizeEventList);
id++;
}
}
/*添加新的最后一个空输入*/
document.getElementById(“事件列表”).innerHTML=document.getElementById(“事件列表”).innerHTML+'
';
document.getElementById(“事件”+id).addEventListener(“输入”,resizeEventList);
}
函数resizeEventList(e){
如果(类型e!=“未定义”){
var-box=document.getElementsByClassName(“eventBox”);
if(e.target.id==“event”+getMaxID(框,“event”)&&e.type==“input”){
/*输入到最后一个可用框->添加一个空框*/
loadText();//保存当前输入
senderID=e.target.id;//记住触发元素的id,以便以后重置焦点
addBox();//添加另一个框
WriteText();//将以前的输入写回框中
document.getElementById(senderID).focus();//重置焦点
}else if(e.target.value.length==0&&getID(e.target,“事件”)删除最后一个空框*/
senderID=e.target.id;//记住触发元素的id,以便以后重置焦点
delBox();//删除所有框并创建X个新框
document.getElementById(senderID).focus();//重置焦点
}
}
}
var eventtext=新数组();
森德里德变种;
document.getElementById(“event1”).addEventListener(“输入”,resizeEventList);
现在的问题是:当我将所有事件侦听器仅应用于名为“event1”的输入时,代码按预期工作-键入时添加一个输入,空时删除一个,仅适用于event1。当我将事件侦听器也应用于动态创建的输入时(应该是这样的,并且是在上面的代码中编写的),输入事件仅在第一次输入时触发一次,包括event1。不再记录以下所有输入
有人有解决办法吗
---完整代码--------------------
<form id="planForm" class="top-margin" method="post" action="new.php?action=add">
<div>
<input class="text head bold" type="date" name="date" placeholder="Datum" value="<?php echo date("Y-m-d", time());?>" required /> <br>
<div id="eventList" class="gap">
<input id="event1" class="text bold eventBox" type="text" name="event1" placeholder="Ereignis 1" /> <br>
</div>
</div >
<input type="button" value="Speichern" onclick="save();" / >
</form>
<script>
function getID(elm, type) {
if (typeof elm != 'undefined') {
return elm.id.replace(type, "");
} else {
return "";
}
}
function getMaxID(list, type) {
currID = 0;
max = 0;
if (list != null && list.length > 0 && type != null) {
for (var i=0; i < list.length; i++) {
currID = getID(list[i], type);
if ( currID > max ) {
max = currID;
}
}
}
return max;
}
function addBox() {
var boxes = document.getElementsByClassName("eventBox");
var id = +getMaxID(boxes, "event") + +1; // ID of input being created
var list = document.getElementById("eventList");
list.innerHTML = list.innerHTML + '<input id="event'+ id +'" class="text bold eventBox" type="text" name="event'+ id +'" placeholder="Ereignis '+ id +'" /> <br>';
document.getElementById("event" + id).addEventListener("input", resizeEventList);
console.log(document.getElementById("event" + id));
}
function delBox() {
loadTexts(); // save current inputs
var list = document.getElementById("eventList");
document.getElementById("eventList").innerHTML = '';
var id = 1;
for (var i = 1; i < eventTexts.length; i++) {
if (eventTexts[i].length > 0) {
/* recreate box with its former input (if not empty) */
document.getElementById("eventList").innerHTML = document.getElementById("eventList").innerHTML + '<input id="event'+ id +'" class="text bold eventBox" type="text" name="event'+ id +'" placeholder="Ereignis '+ id +'" value="' + eventTexts[i] + '"/> <br>';
document.getElementById("event" + id).addEventListener("input", resizeEventList);
id++;
}
}
/* add new last empty input */
document.getElementById("eventList").innerHTML = document.getElementById("eventList").innerHTML + '<input id="event'+ id +'" class="text bold eventBox" type="text" name="event'+ id +'" placeholder="Ereignis '+ id +'" value=""/> <br>';
document.getElementById("event" + id).addEventListener("input", resizeEventList);
}
function resizeEventList(e) {
if (typeof e != 'undefined') {
var boxes = document.getElementsByClassName("eventBox");
if (e.target.id == "event"+getMaxID(boxes, "event") && e.type == 'input') {
/* input into last available box -> add an empty box */
loadTexts(); // save current inputs
senderID = e.target.id; // remember ID of triggering element for resetting focus afterwards
addBox(); // add another box
writeTexts(); // write former inputs back into boxes
document.getElementById(senderID).focus(); // reset focus
} else if (e.target.value.length == 0 && getID(e.target, "event") < getMaxID(boxes, "event")) {
/* box before last box empty -> delete last empty box */
senderID = e.target.id; // remember ID of triggering element for resetting focus afterwards
delBox(); // delete all boxes and create X new boxes
document.getElementById(senderID).focus(); // reset focus
}
}
}
function loadTexts() {
var boxes = document.getElementsByClassName("eventBox");
for (var i=0; i < boxes.length; i++) {
eventTexts[getID(document.getElementById(boxes[i].id), "event")] = boxes[i].value;
}
}
function writeTexts() {
var boxes = document.getElementsByClassName("eventBox");
for (var i=0; i < boxes.length-1; i++) {
document.getElementById(boxes[i].id).value = eventTexts[getID(boxes[i], "event")];
}
}
var eventTexts = new Array();
var senderID;
document.getElementById("event1").addEventListener("input", resizeEventList);
</script>
对于每个想了解解决方案的人:
使用“insertAdjacentHTML”而不是“innerHTML”动态创建元素。感谢RajeshP提供了一个指向此有用答案的链接:在添加侦听器之前,您是否已注销并实际获取了页面上的元素?是的,我获得了正确的ID,但仅在第一次输入之后。进一步的输入根本不会触发事件。您是否看到这是否返回元素?getElementById(“事件”+id)是的,它会被返回。奇怪的是:动态添加的监听器和event1的监听器都可以正常工作,但只能工作一次。之后,它们似乎都不再触发事件了。问题可能是使用innerHTML追加新的输入。有关类似问题,请参见此答案。
function addBox() {
var boxes = document.getElementsByClassName("eventBox");
var id = +getMaxID(boxes, "event") + +1; // ID of input being created
var list = document.getElementById("eventList");
list.innerHTML = list.innerHTML + '<input id="event'+ id +'" class="text bold eventBox" type="text" name="event'+ id +'" placeholder="Ereignis '+ id +'" /> <br>';
document.getElementById("event" + id).addEventListener("input", resizeEventList);
}
function delBox() {
loadTexts(); // save current inputs
var list = document.getElementById("eventList");
document.getElementById("eventList").innerHTML = '';
var id = 1;
for (var i = 1; i < eventTexts.length; i++) {
if (eventTexts[i].length > 0) {
/* recreate box with its former input (if not empty) */
document.getElementById("eventList").innerHTML = document.getElementById("eventList").innerHTML + '<input id="event'+ id +'" class="text bold eventBox" type="text" name="event'+ id +'" placeholder="Ereignis '+ id +'" value="' + eventTexts[i] + '"/> <br>';
document.getElementById("event" + id).addEventListener("input", resizeEventList);
id++;
}
}
/* add new last empty input */
document.getElementById("eventList").innerHTML = document.getElementById("eventList").innerHTML + '<input id="event'+ id +'" class="text bold eventBox" type="text" name="event'+ id +'" placeholder="Ereignis '+ id +'" value=""/> <br>';
document.getElementById("event" + id).addEventListener("input", resizeEventList);
}
function resizeEventList(e) {
if (typeof e != 'undefined') {
var boxes = document.getElementsByClassName("eventBox");
if (e.target.id == "event"+getMaxID(boxes, "event") && e.type == 'input') {
/* input into last available box -> add an empty box */
loadTexts(); // save current inputs
senderID = e.target.id; // remember ID of triggering element for resetting focus afterwards
addBox(); // add another box
writeTexts(); // write former inputs back into boxes
document.getElementById(senderID).focus(); // reset focus
} else if (e.target.value.length == 0 && getID(e.target, "event") < getMaxID(boxes, "event")) {
/* box before last box empty -> delete last empty box */
senderID = e.target.id; // remember ID of triggering element for resetting focus afterwards
delBox(); // delete all boxes and create X new boxes
document.getElementById(senderID).focus(); // reset focus
}
}
}
var eventTexts = new Array();
var senderID;
document.getElementById("event1").addEventListener("input", resizeEventList);
<form id="planForm" class="top-margin" method="post" action="new.php?action=add">
<div>
<input class="text head bold" type="date" name="date" placeholder="Datum" value="<?php echo date("Y-m-d", time());?>" required /> <br>
<div id="eventList" class="gap">
<input id="event1" class="text bold eventBox" type="text" name="event1" placeholder="Ereignis 1" /> <br>
</div>
</div >
<input type="button" value="Speichern" onclick="save();" / >
</form>
<script>
function getID(elm, type) {
if (typeof elm != 'undefined') {
return elm.id.replace(type, "");
} else {
return "";
}
}
function getMaxID(list, type) {
currID = 0;
max = 0;
if (list != null && list.length > 0 && type != null) {
for (var i=0; i < list.length; i++) {
currID = getID(list[i], type);
if ( currID > max ) {
max = currID;
}
}
}
return max;
}
function addBox() {
var boxes = document.getElementsByClassName("eventBox");
var id = +getMaxID(boxes, "event") + +1; // ID of input being created
var list = document.getElementById("eventList");
list.innerHTML = list.innerHTML + '<input id="event'+ id +'" class="text bold eventBox" type="text" name="event'+ id +'" placeholder="Ereignis '+ id +'" /> <br>';
document.getElementById("event" + id).addEventListener("input", resizeEventList);
console.log(document.getElementById("event" + id));
}
function delBox() {
loadTexts(); // save current inputs
var list = document.getElementById("eventList");
document.getElementById("eventList").innerHTML = '';
var id = 1;
for (var i = 1; i < eventTexts.length; i++) {
if (eventTexts[i].length > 0) {
/* recreate box with its former input (if not empty) */
document.getElementById("eventList").innerHTML = document.getElementById("eventList").innerHTML + '<input id="event'+ id +'" class="text bold eventBox" type="text" name="event'+ id +'" placeholder="Ereignis '+ id +'" value="' + eventTexts[i] + '"/> <br>';
document.getElementById("event" + id).addEventListener("input", resizeEventList);
id++;
}
}
/* add new last empty input */
document.getElementById("eventList").innerHTML = document.getElementById("eventList").innerHTML + '<input id="event'+ id +'" class="text bold eventBox" type="text" name="event'+ id +'" placeholder="Ereignis '+ id +'" value=""/> <br>';
document.getElementById("event" + id).addEventListener("input", resizeEventList);
}
function resizeEventList(e) {
if (typeof e != 'undefined') {
var boxes = document.getElementsByClassName("eventBox");
if (e.target.id == "event"+getMaxID(boxes, "event") && e.type == 'input') {
/* input into last available box -> add an empty box */
loadTexts(); // save current inputs
senderID = e.target.id; // remember ID of triggering element for resetting focus afterwards
addBox(); // add another box
writeTexts(); // write former inputs back into boxes
document.getElementById(senderID).focus(); // reset focus
} else if (e.target.value.length == 0 && getID(e.target, "event") < getMaxID(boxes, "event")) {
/* box before last box empty -> delete last empty box */
senderID = e.target.id; // remember ID of triggering element for resetting focus afterwards
delBox(); // delete all boxes and create X new boxes
document.getElementById(senderID).focus(); // reset focus
}
}
}
function loadTexts() {
var boxes = document.getElementsByClassName("eventBox");
for (var i=0; i < boxes.length; i++) {
eventTexts[getID(document.getElementById(boxes[i].id), "event")] = boxes[i].value;
}
}
function writeTexts() {
var boxes = document.getElementsByClassName("eventBox");
for (var i=0; i < boxes.length-1; i++) {
document.getElementById(boxes[i].id).value = eventTexts[getID(boxes[i], "event")];
}
}
var eventTexts = new Array();
var senderID;
document.getElementById("event1").addEventListener("input", resizeEventList);
</script>