jQuery插件Hovercard在动态生成的内容中不起作用

Question

Jquery plugin Hovercard works well in simple HTML code but does not work when i used it in javascript code (dynamically creating html code through javascript). Maybe this is also a general problem, how can jquery plugin work in js code generated content?

Answer 1

I haven't seen any of your code so I can't be sure that this will help. But the issue with adding HTML dynamically with JS is that the resulting DOM elements would not have the necessary event handlers attached to them (in the case of Hovercard, mouseover , mouseout and probably others). The solution would be to call $(...).hovercard({...}) on the newly added DOM elements after you add them. eg

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

After this block, the a tag would have the Hovercard effect. If you call hovercard() on some elements in $(document).ready() , then only those elements which are present when the DOMContentLoaded event fires will have the effect (not any elements you add later).