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

Question

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

Answer 1

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

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

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