Hinzufügen des Ereignis-Listeners zum dynamischen Container

Question

Ich habe Probleme beim Hinzufügen eines Klickereignis-Listeners zu Elementen, die noch nicht auf der Seite vorhanden sind. Nur ein Hinweis, dass ich den folgenden Code in einem JQuery Equavilant zum Dokumentieren fertig bin, so dass es ausgeführt wird, nachdem das DOM geladen wurde. Also ich habe ein Div, die ich als eine Art Taste

<div id="openContainer"> ... </div> 

Jetzt bin mit, wenn dieses div geklickt wird, wird ein anderes div auf der Seite dynamisch hinzugefügt. Dieses div wird nur hinzugefügt, wenn das obige click-Ereignis stattfindet. Das hinzugefügte div hat eine Schaltfläche mit der ID-Suche. Ich versuche, einen Event-Listener hinzuzufügen. Bisher habe ich diese

document.getElementById('openContainer').addEventListener('click', function() { 
    document.getElementById('search').addEventListener('click', function() { 
     alert("ADDED") 
    }); 
}); 

Allerdings, wenn ich dies betreibe ich einen Fehler, dass document.getElementById (...) null ist. Ich denke, der Grund dafür ist, dass der Event-Listener hinzugefügt wird, bevor das eigentliche dynamische div hinzugefügt wurde. In der Tat, ich weiß, dass dies der Fall ist, weil es mit einem Timeout funktioniert, z.

document.getElementById('openContainer').addEventListener('click', function() { 
    setTimeout(function() { 
     document.getElementById('search').addEventListener('click', function() { 
      alert("ADDED") 
     }); 
    }, 2000); 
}); 

Gibt es eine Möglichkeit, dies ohne Zeitüberschreitung zu tun?

Dank

Answer 1

Sie können auf dem vorhandenen Element ein einzelnes Ereignis-Handler platzieren, und in der anonymen Funktion von addEventListener(), überprüfen Sie die ID des Elements, auf dem das Ereignis ausgelöst wurde:

document.getElementById('openContainer').addEventListener('click', function(event){ 
    var clicked = event.target; 
    if (clicked.id === 'openContainer') { 
    // the '#openContainer' element was clicked, 
    // ...do stuff 
    } else if (clicked.id === 'search') { 
    // the '#search' element was clicked, 
    // ...do stuff 
    } 
}); 

Answer 2

Ein möglicher Grund ist, dass Ihr JavaScript ausgeführt wird, bevor das DOM-Element überhaupt erstellt wird.

Stellen Sie sicher, dass Ihre Skript-Tags nach den Tags sind.