0

私はJquery Hover Footnotesプラグインを使用しています。これにより、脚注を追加し、ホバーオーバーで動的に表示できます。

使用例はこちら: 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 = $('<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 の脚注では機能しません。

私がはっきりしていたことを願っています。

あなたの助けは非常に高く評価されています。

4

1 に答える 1

1

あなたが言ったように、問題は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; 
}
于 2013-02-26T01:01:56.533 に答える