应用于多个元素时，事件仅触发一次答案

【问题标题】：Event is triggered only once when applied to multiple elements应用于多个元素时，事件仅触发一次
【发布时间】：2017-07-18 13:55:18
【问题描述】：

我正在使用纯 JS 动态创建表单。每当最后一个输入字段接收到输入时，就应该创建另一个空字段。另一方面，当最后一个字段之前的字段也为空时，也应删除最后一个字段。

HTML（在用户输入之前）：

<div id="eventList" class="gap">
        <input id="event1" class="text bold eventBox" type="text" name="event1" placeholder="Ereignis 1" /> <br>
</div>

Javascript（之后实施；摘录）：

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);

现在的问题：当我将所有事件侦听器仅应用于名为“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>

【问题讨论】：

在添加侦听器之前，您是否已注销您实际上正在获取页面上的元素？
是的，我得到了正确的 ID，但只有在第一次输入之后。进一步的输入根本不会触发事件
你看到这是否正在返回元素？ document.getElementById("事件" + id)
是的，它被退回了。奇怪的是：动态添加的侦听器以及 event1 的侦听器正常工作，但只有一次。在那之后，他们似乎都不再触发这个事件了。
问题可能在于使用 innerHTML 附加新输入。有关类似问题，请参阅此答案。 stackoverflow.com/questions/28441798/…

标签： javascript html events dom-events addeventlistener

【解决方案1】：

对于所有想知道解决方案的人：

使用“insertAdjacentHTML”而不是“innerHTML”来动态创建元素。感谢 RajeshP 提供此有用答案的链接：Javascript AddEventListener Fires only once

【讨论】：

谢谢，将“innerHTML”改为“insertAdjacentHTML”为我解决了很多问题。