來自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;

}

其中Ajax的呼喚pagex.php其返回使用自定義字段：

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

在單一的HTML代碼。 php是：

<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

這是一個JS問題（而不是DOM更新後，再次觸發的動作），在這裏題外話。更好地問SO（標記爲移動）。 – kaiser 2013-02-25 13:14:41

所以如你所說，這個問題與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:01:56

來自wordpress插件的jQuery腳本不適用於通過ajax加載的內容。

回答

相關問題