Jquery 插件悬停卡在动态生成的内容中不起作用

Jquery plugin hovercard not work in dynamically generated content

本文关键字:不起作用 悬停 插件 动态 Jquery      更新时间:2023-09-26

Jquery 插件 Hovercard 在简单的 HTML 代码中运行良好,但当我在 JavaScript 代码中使用它时不起作用(通过 JavaScript 动态创建 HTML 代码(。也许这也是一个普遍的问题,jquery 插件如何在 js 代码生成的内容中工作?

我没有看到你的任何代码,所以我不确定这是否有帮助。但是使用 JS 动态添加 HTML 的问题在于,生成的 DOM 元素不会附加必要的事件处理程序(在 Hovercard、mouseovermouseout 和可能的其他情况下(。解决方案是在添加新添加的 DOM 元素调用$(...).hovercard({...})。例如

$("body").append("<a class='hovercard'>New element.</a>");
$("body a.hovercard").hovercard({...});

在此块之后,a标签将具有悬停卡效果。如果对 $(document).ready() 中的某些元素调用 hovercard(),则只有触发DOMContentLoaded事件时存在的那些元素才会具有效果(不是您稍后添加的任何元素(。