悬停动作不适用于动态创建的 UL [重复]答案

【问题标题】：Hover action not working with dynamically created UL [duplicate]悬停动作不适用于动态创建的 UL [重复]
【发布时间】：2013-07-06 03:15:38
【问题描述】：

我有一些显示 youtube vidz 列表的 html，它应该有一个悬停动作。当我创建此列表的静态时，它工作正常，但是当我尝试使用 jquery 动态创建它时，列表呈现但悬停效果不起作用。我已将它上传到我的网站以便于查看（太多的 .js 文件无法加载到小提琴中）。

在该页面上，第一个视频是静态视频，其余视频（位于其下方的单独一行）是动态加载的，这不起作用。我尝试排除一些 .js 文件，认为某处可能存在冲突，但似乎该样式未应用于动态代码。

感谢任何帮助/指导！

【问题讨论】：

不要只发布指向整个网站的链接。将您的问题简化为可以在此处展示的一小段摘录，也许也可以在小提琴中展示。
在我的 FF 中，两者都工作相同......我调查的唯一事情是悬停图像出现在下面列表中的视频旁边
@Barmar 理解，但有时当网站太大而无法缩小为小提琴或类似的东西时，您别无选择。我试图把它放在小提琴上，但我花在排除代码、资源等方面的时间真的只是在浪费我的时间。 -swapnesh 我正在使用 Chrome ATM 并且没有在其他任何东西上进行测试......但这对我有一点帮助。我现在知道这似乎是 Chrome/IE 的东西，也许吧。
我查看了 Barmar 提供的链接，但这谈到了使用悬停事件并将按钮连接到它。我正在使用 CSS 来处理悬停事件，在我的 jquery 中，没有分配此事件，只是分配给执行此操作的特定类。

【解决方案1】：

这是因为您在页面中添加动态内容之前使用 jQuery 添加动画。 jQuery 不像 CSS，如果你用 jQuery 选择一个类并对其应用动画，它不会被添加到新元素上，jQuery 只会在调用时查看页面中的内容。

要快速测试这一点，请打开浏览器 JavaScript 控制台并在页面加载后调用您的 hover_overlay(); 函数，您会看到动画已添加到动态添加的内容中。

【讨论】：

听起来合乎逻辑......关于如何解决它的想法？我对 JS、JQuery 和所有东西都很陌生。
对此的快速解决方法是在使用$("#list").append($(html_data)); 将动态内容添加到页面后调用hover_overlay();，但它会在开始时已经在页面中的元素上复制事件.为了防止这种情况，您可以通过传递父 jQuery 选择器并使用 jQuery .find() 方法在 hover_overlay() 函数中定位页面的特定部分而不是整个页面，或者向添加了动画的元素添加属性，并且再次拨打hover_overlay() 时跳过它们。谷歌“jquery .attr()”了解更多信息！
刚回来尝试这个....效果很好。感谢您的帮助，非常感谢！

【解决方案2】：

如果你更喜欢使用jquery，那么使用“on”事件可以轻松支持动态生成的事件。你可以将代码编写为

$(document).on("mousedown","id-of-element-to-be-hoverd",function(e){
     Your code....
});

【讨论】：

【解决方案3】：

为什么不直接使用 CSS？

.hover_image{
  transition: all 1s ease-in;
}
.hover_image:hover{
  opacity: 0.2
}

【讨论】：