如何在ajax在WordPress中加載頁面後觸發jquery插件？

Question

當谷歌搜索結果中的所有鏈接都是紫色的，而且幾個小時後我感到沮喪，我決定請你們幫我解決這個問題。

在我的WordPress主頁上，循環會生成包含博客上所有帖子標題的列表。爲了提高網站加載時間，我決定使用AJAX。您不必一次加載所有內容，而是點擊某個帖子的標題以在下面顯示它的共享。簡單地說，當你點擊它POST的帖子的ID（從屬性標記採取）到ajax.php文件（WordPress模板與循環顯示內容...）。當內容被讀出時，它會顯示在前端。

問題是插件。因爲內容加載後（DOM更改）它們不會重新啓動。顯然，我不希望我添加每個插件的解決方案，我安裝到AJAX回調，因爲它不是它應該的方式。我希望它自動化。 WordPress旨在簡單易用（甚至從開發人員的角度來看）。 （），livequery（） - 插件，listen（） - 插件..並嘗試將我的ajax腳本更改爲WordPress方式（使用admin-ajax.php）和每次結果是一樣的 - 它不工作。

通過插件我的意思，例如：語法高亮，社會共享按鈕或圖像的fancybox /燈箱......即使我添加插件的功能，阿賈克斯循環手動它仍然無法顯示它...

我懷疑我可以使用實況（）函數有點錯了或什麼......反正這是我的代碼：

前端環（的index.php）

<?php while (have_posts()) : the_post(); ?> 
    <article> 
     <div class="fake"> 
      <div class="header" rel="<?php the_ID(); ?>"> 
       <h1 class="title"><?php the_title(); ?></h1> 
       <span class="tags"> 
        <?php 
         $posttags = get_the_tags(); 
         if ($posttags) { 
         foreach($posttags as $tag) { 
          echo $tag->name . ', '; 
         } 
         } 
        ?> 
       </span> 
       <span class="post_no">#<?=$published?></span> 
       <div class="arrow"></div> 
      </div> 
     </div> 
     <div class="content"></div> 
    </article> 
    <?php endwhile; ?> 

的片段AJAX我用：

$('.header').live('click',function() { 
     var content = $(this).parent().parent().find('.content'); 
     var post_id = $(this).attr("rel"); 
     content.load("http://localhost/simpleecode/ajax/",{id:post_id}).delay(800).slideDown('slow');}); 

模板與環路AJAX：

<?php $post = get_post($_POST['id']); ?> 
<?php if ($post) : ?> 
<?php setup_postdata($post); ?> 
<?php the_content(); ?> 
<?php endif;?> 

我想你可能想鏈接到開發網站檢查出的DOM和文件爲自己太（我二手shortlink因爲它是開發站點，我不希望它成爲公衆無論如何）：

http://bit.ly/Oa6hWH

希望你有想法如何做到這一點：S

Answer 1

使用AJAX請求的成功/完成回調調用插件的DOM是新的HTML插件。

content.load("http://localhost/simpleecode/ajax/",{id:post_id}, function(){ 
    /* new html now exists*/ 
    $(this).find('.classThatNeedsPlugin').somePlugin(); 

}).delay(800).slideDown('slow'); 

jQuery API - load() method docs

如果插件，它們有任何尺寸敏感的代碼，你可能需要改變這個調用插件在動畫

編輯的回調：而不是使用延遲（ ）設置動畫，在相同的成功回調中調用動畫，html將準備好然後

content.load("http://localhost/simpleecode/ajax/",{id:post_id}, function(){ 
    /* new html now exists*/ 
    $(this).find('.classThatNeedsPlugin').somePlugin().slideDown('slow');  

}); 

Edit2替代方法：jQuery延遲對象方法。

你也可以使用deferred來設置你的ajax回調。

var jqXhr= content.load("http://localhost/simpleecode/ajax/",{id:post_id}); 
$.when(jqXhr).then(/* plugin function */); 

或自定義事件

/* on page load*/ 
$('#myTable').on('myCustomEventName', function(){ 
    $(this).doPlugins(); 
}).trigger('myCustomEventName'); 

/* ajax callback*/ 
content.load("http://localhost/simpleecode/ajax/",{id:post_id}, function(){ 
    $('#myTable').trigger('myCustomEventName') 

})