イベントは複数の要素に適用されると1回だけトリガーされます

Question

私はプレーン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); 

問題：私だけ」という名前の入力に、すべてのイベント・リスナーを適用イベント1 "の場合、コードは期待どおりに動作します。入力時に入力を追加し、空の場合は削除し、イベント1のみを削除します。イベントリスナーを動的に作成された入力にも適用すると（これは上のコードに書かれているように）、入力イベントはevent1を含む最初の入力時に1回だけトリガーされます。以降の入力はすべて記録されません。

誰にも解決策がありますか？知りたい皆のため

おかげで、JASPA

--- FULL CODE --------------------

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

Answer 1

ソリューション：

"innerHTML"ではなく "insertAdjacentHTML"を使用して要素を動的に作成します。この有益な回答へのリンクを提供してくれたRajeshPに感謝します：Javascript AddEventListener Fires only once