Klicken Sie nicht auf die Schaltfläche arbeiten dynamisch hinzugefügt

Question

ich eine Schaltfläche dynamisch Hinzufügen auf div Existenz abhängig, so habe ich diese:

function addVideoButton(id) { 
    var div = document.createElement('div'); 
    div.className = 'video'; 
    div.dataset.videoid = id; 
    div.dataset.params =  "modestbranding=1&am;showinfo=0&vq=720&color=white&theme=light&fs=1" 
    div.innerHTML = '<button class="play c-btn"><use xlink:href="#play"></use>WATCH VIDEO</button>'; 
    var title = findTitle(); 
    document.getElementById(title).appendChild(div); 
} 

Auch ich habe das unten stehende Stück so, wenn diese Art von Tasten sind geklickt haben, wird ein param (Video-ID), und dann wird ein Video abgespielt auf einem modalen

// show frame for the video modal 
    $(this).find('.play').on("click", function() { 
     showFrame(getIframe(videoId, params), "video"); 
    }); 

jedoch genommen, bemerkte ich, dass, wenn ich den Knopf dynamisch wie oben, klicken Sie dann auf Ereignisbindung wird nicht funktionieren, wenn hinzufügen Ich habe geklickt, das Modal wird nicht gestartet, was fehlt mir?

Answer 1

Bitte verwenden Sie den nachstehenden Code, um den Klick an dynamisch hinzugefügte Container zu binden. Alle Elemente, die in Zukunft im DOM vorkommen, sollten wie unten beschrieben an Ereignisse gebunden werden.

$("body").on("click",".play", function() { 
     showFrame(getIframe(videoId, params), "video"); 
    }); 

Answer 2

Sie müssen das Ereignis zu einem der übergeordneten Elemente der Schaltfläche hinzufügen, die zum Zeitpunkt des Ladens des Dokuments vorhanden war. Das Ereignis sprudelt auf und wird gefangen. In Ihrem Fall wird Ihr gesamter <div> dynamisch hinzugefügt, daher sollte das Hinzufügen eines Ereignishandlers zu dem unmittelbaren übergeordneten Element <div> funktionieren.