javascript - Jquery插件hovercard在动态生成的内容中不起作用

Question

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

Answer 1

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

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

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