wordpress插件的jquery脚本不能在通过ajax加载的内容中工作

我正在使用Jquery Hover Footnotes插件,它允许添加脚注并在hover时动态显示它们。

它的用法示例如下: http : //restoredisrael.org/blog/961/footnote-plugin-test-page/

另外,在我的single.php中,我使用选项卡式内容显示自定义字段中的元数据。 换句话说,当单击选项卡时,自定义字段通过div上的ajax加载,并且此内容包含脚注。

jquery函数管理选项卡是:

function tab(var) { $(document).ready(function(){ var Tabs = { '1' : 'page1.php?p='+var, '2' : 'page2.php?p='+var, '3' : 'page3.php?p='+var, '4' : 'page4.php?p='+var, '5' : 'page5.php?p='+var } $.each(Tabs,function(i,j){ var tmp = $('
  • '+i+'
  • '); tmp.find('a').data('page',j); $('ul.tabContainer').append(tmp); }) var the_tabs = $('.tab'); the_tabs.click(function(e){ var element = $(this); var bg = element.attr('class').replace('tab',''); if(!element.data('cache')) { $.get(element.data('page'),function(msg){ $('#contentHolder').html(msg); element.data('cache',msg); }); } e.preventDefault(); }) the_tabs.eq(0).click(); }); return false; }

    Ajax正在调用pagex.php,它使用以下命令返回自定义字段:

     get_post_meta($post->ID, 'key', true); 

    single.php中的html代码是:

     

    有:

     <body onLoad="tab();> 

    问题是脚注看起来很正确,但hover不起作用。 hover由插件文件夹中的js脚本管理,该脚本在最终源代码中正确加载,但hover效果不适用于由ajax加载的div中的脚注。

    我希望我很清楚。

    非常感谢您的帮助。

    正如您所说,问题与更新DOM后触发插件JS操作有关。 我在插件的js源代码中发现动作是由:Footnotes.Setup()触发的,所以我在ajax load函数中添加了它。

    现在的代码是:

     function tab(var) { $(document).ready(function(){ var Tabs = { '1' : 'page1.php?p='+var, '2' : 'page2.php?p='+var, '3' : 'page3.php?p='+var, '4' : 'page4.php?p='+var, '5' : 'page5.php?p='+var } $.each(Tabs,function(i,j){ var tmp = $('
  • '+i+'
  • '); tmp.find('a').data('page',j); $('ul.tabContainer').append(tmp); }) var the_tabs = $('.tab'); the_tabs.click(function(e){ var element = $(this); var bg = element.attr('class').replace('tab',''); if(!element.data('cache')) { $.get(element.data('page'),function(msg){ $('#contentHolder').html(msg); **Footnotes.setup();** element.data('cache',msg); }); } e.preventDefault(); }) the_tabs.eq(0).click(); }); return false; }