Hinzufügen von Ereignis-Listenern zu dynamisch hinzugefügten HTML-Elementen

Question

Ich habe ein Problem beim Hinzufügen von Ereignis-Listenern zu dynamisch hinzugefügten HTML-Elementen.

Das Szenario besteht darin, dass eine Reihe von 'Formularen' in einer Datenbank gespeichert und nacheinander einem Benutzer angezeigt werden. Jedes Mal, wenn ein neues Formular angezeigt wird, werden Ereignishandler zum neuen 'Formular' hinzugefügt, dh zu den Child-Elementen. Die IDs der HTML-Elemente sind für jede 'Form' gleich.

Alles funktioniert gut für die erste Form, aber wenn die zweite Form hinzugefügt wird, auch wenn die Ereignishandler hinzugefügt werden, feuern sie nicht.

Ich habe unzählige Permutationen der Verwendung von .click, .on .off, .addEventListener .removeEventListener usw. versucht, aber es scheint nicht zu funktionieren.

Der Code Ich verwende ist:

  //replace innerHTML    
      $("#mob_html").off();       //remove previous event listeners 
      $("#mob_html").remove();       //remove html element 
      $(form.html_str).insertAfter("#event_hdr_div"); // add new html element with form html stored in database 

      // add event handler 
      $('#'+child_id_1).click(function() { 
       if (perm_fg==true) { 
        open(); 
       } 
      }); 
      $('#'+child_id_1).click(function() { 
       if (perm_fg==true) { 
        open(); 
       } 
      }); 

Irgendwelche Vorschläge zu schätzen!

Answer 1

Wählen Sie mit Dokument-Objekt

$(document).on('click', '.some-class', function() { 
    // ... 
}); 

Answer 2

Mit Hilfe auf() -Funktion können Sie Ihr dynamisch hinzugefügt Element binden, aber stellen Sie sicher, dass neueste Version von jQuery verwenden, da es nicht in früheren Version von jQuery unterstützt kann .