jquery script of wordpress plugin dont work in content loaded via ajax

2 Views

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/

Read More

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.

Post Views: 2

Related posts

Leave a Reply

1 comment

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