Warum funktioniert das Anfügen von Javascript nicht?

Question

Ich habe eine Tabelle in meinem HTML und ich verwendet append, um alle Zeilen in der Tabelle mit jquery anfügen. Ein Teil des Anhangs ist unten abgebildet. Ich habe einen Eingabebereich, um Zahlen zu ändern, aber jetzt funktioniert dieser Klick nicht mehr.

Ich frage mich warum? Wenn ich den Code zurück in meine HTML-Tabelle verschiebe, funktioniert es. Auch die Schaltfläche zum Löschen funktioniert nicht. Ich vermute, dass dies mit Append-Funktion zu tun hat?

$('.bundle-main').append('<li class="td td-amount">\ 
     <div class="amount-wrapper ">\ 
      <div class="item-amount ">\ 
      <div class="sl">\ 
       <input class="min am-btn" name="" type="button" value="-" />\ 
       <input class="text_box" name="" type="text" value="3" style="width:30px;" />\ 
       <input class="add am-btn" name="" type="button" value="+" />\ 
       </div>\ 
       </div>\ 
       </div>\ 
       </li>'); 

PS: Der Grund, warum ich append verwenden wollen, weil ich dynamisch möchte meine Inhalte kontrollieren und meine css funktioniert gut.

Wissen Sie warum?

Answer 1

Da Sie die Eingaben dynamisch anhängen, müssen Sie sicherstellen, dass die Klick-Listener nach dem Anhang hinzugefügt werden. Andernfalls sind sie im DOM nicht vorhanden und der Klick-Listener wird nicht angehängt.

Fügen Sie einfach Ihre Listener nach dem Append-Aufruf an.

Answer 2

Da Ihr Event-Handler definiert ist, bevor die Eingabe angehängt wird. Sie haben 2 Möglichkeiten:

No1. Nach Append-Eingabe, dann den Event-Handler definiert.

No2. Verwenden Sie einfach .on (‚Klick‘) auf der Verpackung wie folgt vor:

$('.bundle-main').on('click', '.add.am-btn', function(){ 
    // To Do 
});