I'm adding a button dynamically depending on div existence, so I have this:
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);
}
Also, I have the below piece so when these types of buttons are clicked, a param is taken (video id) and then a video is played on a modal
// show frame for the video modal
$(this).find('.play').on("click", function() {
showFrame(getIframe(videoId, params), "video");
});
However, I noticed that if I add the button dynamically as above, then click event binding won't work, if I clicked, it won't start the modal, what am I missing?