Question

我遇到了类似的问题，但它没有我希望的确切问题/解决方案。如果之前已经回答过，我会提前道歉并且我错过了。

我有动态HTML代码，我从db：

返回的AJAX上插入

for(var i=0;i<data.Links.length;i++){  
  $('#vid-list').append('<li class="vid-item" onclick="startVideo(\''+data.Links[i]+'\')"><div class="thumb"><img src="'+ data.Thumb[i]+'"></div><div class="desc">'+data.Name[i]+'</div></li>');
  }

data.links是一组youtube嵌入式链接。 data.Name是一个标题数组，data.thumb是相应的缩略图，依此类推。

startVideo是我的JS文件中的一个功能，定义如下：

$(function(){
   function startVideo(srcUrl){
      $('#popup2').style.display ='block';
      document.getElementById('vid_frame').src=srcUrl;
    }
 });

它从动态HTML传递链接以在iframe弹出窗口中播放视频。 HTML代码是：

<div class="vid-list-container">
                    <ul id="vid-list">
                        <!--need to insert videos here-->
                    </ul>
                </div>

 <div id="popup2" class="popup">
        <iframe id="vid_frame" frameborder="0" height="315" src="" width="560" allowscriptaccess="always">
            </iframe>
        <a class="close" href="#" onclick="toggleVideo('hide')">
        <img id="close-icon" src="../images/info-close-icon.png"></a></div>
    </div>

所以这是我的问题：加载后HTML看起来很好。数据在HTML元素中正确填充。

但是当我点击视频时，没有弹出窗口。即startVideo（）不会被调用onClick事件。此代码适用于静态HTML代码。我读了其他问题，据说如果事件在动态元素完全加载后发生，那么绑定应该没有问题。但这不是这里的情况。

我还能做其他检查吗？

将onclick处理程序作为动态HTML内容的一部分传递

0 个答案: