WordPress插件的jQuery脚本在不工作的内容通过AJAX加载(jquery script

2019-10-17 18:27发布

我使用jQuery的悬停脚注插件,允许添加脚注和动态显示它们悬停。

其使用的一个例子是在这里: 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; 
}

其中阿贾克斯呼吁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脚本管理,但悬停效果不工作在阿贾克斯加载的DIV脚注。

我希望我是清楚的。

你的帮助是高度赞赏。

Answer 1:

所以,如你所说,这个问题是关系到触发插件JS行动DOM更新后。 我该动作由触发插件的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; 
}


文章来源: jquery script of wordpress plugin dont work in content loaded via ajax