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

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

我在从db返回AJAX时插入了动态HTML代码：

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

它通过动态HTML中的链接在iframe弹出窗口中播放视频。其HTML代码为：

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

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

但是当我点击视频时，没有弹出窗口出现。i、 e.startVideo（）不会在单击事件时调用。这段代码与静态HTML代码配合得很好。我读了其他问题，有人说如果事件发生在动态元素完全加载之后，那么绑定应该不会有问题，但这里不是这样

---

还有其他我可以做的检查吗

尝试从函数中删除$（function（）{您会被需要事件委派的动态元素弄糊涂。没有“绑定”因为您使用的是

onclick=

属性，所以没有通过js绑定事件处理程序。问题是作用域-

startVideo

的作用域在jquery启动函数内部，因此不能从外部调用。正如@Roy所说，将其移到

$（function（）{}）外部

code非常感谢！非常好用。我简直不敢相信我没有尝试过。从函数中删除$（function（）{会让人感觉很敏感。你会被需要事件委托的动态元素弄糊涂。没有“绑定”因为您使用的是

onclick=

属性，所以没有通过js绑定事件处理程序。问题是作用域-

startVideo

的作用域在jquery启动函数内部，因此不能从外部调用。正如@Roy所说，将其移到

$（function（）{}）外部

code非常感谢！非常好用。真不敢相信我没有试过。很有道理

<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>