jquery script of wordpress plugin dont work in con

2019-07-22 17:09发布

站内问答 / PHP
622 1 3

I am using Jquery Hover Footnotes plugin that allows adding footnotes and dynamically displays them on hover-over.

An example of its usage is here: http://restoredisrael.org/blog/961/footnote-plugin-test-page/

In addition, in my single.php, I am showing metadata from custom fields using tabbed content. In other words, when clicking on a tab, a custom field is loaded via ajax on the div, and this content is containing footnotes.

The jquery function managing tabs is:

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

where Ajax is calling pagex.php which is returning custom field using:

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

the html code in single.php is:

<ul class="tabContainer" style="display: none;">
</ul>

<div class="clear"></div>

<div id="tabContent" style="display:none;">

    <div id="contentHolder">

    </div>
</div>

with:

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

the problem is that footnotes appear correcly but the hover dont work. The hover is managed by a js script inside the plugin folder which is loaded correctly in the final source code, but the hover effect dont work for the footnotes in the div loaded by ajax.

I hope I was clear.

Your help is highly appreciated.

1条回答
Luminary・发光体
2楼-- · 2019-07-22 18:05

So as you said, the problem is related to triggering the plugin JS action after the DOM is updated. I found on the js source of the plugin that the action is triggered by : Footnotes.Setup(), so I added it in the ajax load function.

The code now is:

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; 
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(3)