wordpress插件的jquery腳本不工作在通過ajax加載的內容中

我正在使用Jquery Hover Footnotes插件，允許添加腳註並在懸停時動態顯示它們。wordpress插件的jquery腳本不工作在通過ajax加載的內容中

其使用的一個例子是在這裏：使用自定義字段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; 
}

其中阿賈克斯呼籲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中的腳註。

我希望我很清楚。

非常感謝您的幫助。

來源

2013-02-25 whiteletters in blankpapers

哪裏標籤？我沒有看到任何。 – JakeParis 2013-02-25 03:31:51

如果您查看您的網站的來源，它似乎已被黑客入侵。在第42行，有很多關於paydayloans的內容。 – JakeParis 2013-02-25 16:21:37

因此，正如你所說，問題是與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-26 01:05:11

wordpress插件的jquery腳本不工作在通過ajax加載的內容中

回答

相關問題