来自wordpress插件的jQuery脚本dosen'不适用于通过ajax加载的内容

jQuery script from wordpress plugin dosen't work for content loaded via ajax.

本文关键字：适用于 ajax 加载 不适用 jQuery 插件 wordpress 脚本 dosen 来自      更新时间：2023-09-26

我正在使用Jquery Hover脚注插件，该插件允许添加脚注并在悬停时动态显示它们。

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

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

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 = $('<li><a href="" class="tab">'+i+'</a></li>');
        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代码是：

<ul class="tabContainer" style="display: none;">
</ul>
<div class="clear"></div>
<div id="tabContent" style="display:none;">
    <div id="contentHolder">
    </div>
</div>

带有：

<body onLoad="tab(<?php echo $thePostID?>);>

问题是脚注显示正确，但悬停不起作用。悬停由插件文件夹中的js脚本管理，该脚本在最终源代码中正确加载，但悬停效果不适用于ajax加载的div中的脚注。

我希望我是清白的。

非常感谢你的帮助。

正如您所说，问题与更新DOM后触发插件JS操作有关。我在插件的js源代码中发现，该操作是由Footnotes.Setup((触发的，所以我将其添加到ajax加载函数中。

现在的代码是：

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 = $('<li><a href="" class="tab">'+i+'</a></li>');
        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; 
}
相关文章：