Question

我根据div的存在动态添加一个按钮，所以我有这个：

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);
}

另外，我有下面的部分所以当点击这些类型的按钮时，会拍摄一个参数（视频ID），然后在模态上播放视频

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

然而，我注意到如果我按上面动态添加按钮，那么单击事件绑定将无法正常工作，如果我点击它，它不会启动模式，我缺少什么？

Answer 1

请使用以下代码将click绑定到动态添加的容器。未来在DOM中出现的任何元素都应绑定到下面的事件。

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

Answer 2

您需要将事件添加到按钮的父元素之一，该元素在文档加载时出现。事件冒出来并将被捕获。在您的情况下，您的整个<div>都会动态添加，因此向此<div>的直接父级添加事件处理程序应该有效。

点击“赢了”按钮动态添加按钮

2 个答案: