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; }