Wordpress和AJAX - 使用AJAX加載內部頁面可以防止Javascript在內部頁面上運行

Question

對於長標題，我非常抱歉，但是它足以代表問題。

我試圖在我的WordPress網站上使用AJAX來加載內頁。然而，當我加載內部頁面時，我有這個功能工作，任何意味着加載並在這些內部頁面上運行的Javascript/jQuery沒有運行/加載。

有才能看到，然後重現問題的兩個步驟：

月1日 - 看看這個頁面：http://www.trekradio.net/dev/schedule - 此頁面包含一個時間表 - 天都的標籤，還當你點擊一個計劃項目，它打開一個jQuery彈出窗口。 Javascript也被用在右邊的欄中，在「支持我們」小部件中，下拉是基於JS的，並且還使用Twitter API腳本來加載twitter feed。正如你所看到的，所有的腳本都存在並且工作正常。

2nd - http://www.trekradio.net/dev/ - 轉到主頁面，然後點擊主菜單上的「schedule」 - 它使用AJAX加載日程表頁面，但是頁面上的所有腳本現在缺失或未執行。

我已經嘗試了很多事情來解決這個問題 - 在日程安排頁面上，幾個腳本嵌入到頁面本身中，我試着將它們移動到標題中，希望這是因爲標題沒有重新加載，腳本可能會運行 - 他們沒有。

而且，我已經嘗試解決這裏提到：Executing <script> inside <div> retrieved by AJAX - 但它談論使用動態腳本模式，我要麼沒有得到它正常工作的能力，或者，它並不在的背景下正常工作是什麼我正在努力完成。

我也嘗試使用這裏建議的解決方案：jquery html() strips out script tags然而，我再次，我無法得到它的工作。

這裏是我的ajax.js中的哪一個供電的Ajax功能的內容：

jQuery(document).ready(function($) { 
    var $mainContent = $("#ajax-content-container"), 
     siteUrl = "http://" + top.location.host.toString(), 
     url = ''; 

    $(document).delegate("a[href^='"+siteUrl+"']:not([href*=/wp-admin/]):not([href*=/wp-login.php]):not([href$=/feed/])", "click", function() { 
     location.hash = this.pathname; 
     return false; 
    }); 

    $("#searchform").submit(function(e) { 
     location.hash = '?s=' + $("#s").val(); 
     e.preventDefault(); 
    }); 

    $(window).bind('hashchange', function(){ 
     url = window.location.hash.substring(1); 

     if (!url) { 
      return; 
     } 

     url = url + " #main-content-container"; 

     $mainContent.animate({opacity: "0.1"}).html('<p>Please wait...</>').load(url, function() { 
      $mainContent.animate({opacity: "1"}); 
     }); 
    }); 

    $(window).trigger('hashchange'); 
}); 

從我通過谷歌-ING發現 - 很多很多人有這種類型的問題，他們的AJAX網站，努力讓腳本在加載的頁面上運行，所以我希望這裏的人們可以幫助提出一個解決方案，不僅可以應用到我的網站，還可以使用他們的網站。

如果人們將代碼與他們的答案包括在一起，或至少解釋清楚我如何修改代碼來完成所需內容，我們將不勝感激。我仍然在學習jQuery/AJAX，所以也許我很愚蠢，並且忽略了一個相對簡單的解決方案，但是我記得，我記得整個社區和我自己都有很好的文檔回答。

Answer 1

我想我已經解決了這個爲自己 - 我不知道，如果它是最完美的解決方案，但它似乎工作。

基本上，我已經採取了一切，將加載在我的內頁，並把它們放到一個名爲「內scripts.js中」和修改ajax.js這個腳本的：

jQuery(document).ready(function($) { 
    var $mainContent = $("#ajax-content-container"), 
     siteUrl = "http://" + top.location.host.toString(), 
     url = ''; 

    $(document).delegate("a[href^='"+siteUrl+"']:not([href*=/wp-admin/]):not([href*=/wp-login.php]):not([href$=/feed/])", "click", function() { 
     location.hash = this.pathname; 
     return false; 
    }); 

    $("#searchform").submit(function(e) { 
     location.hash = '?s=' + $("#s").val(); 
     e.preventDefault(); 
    }); 

    $(window).bind('hashchange', function(){ 
     url = window.location.hash.substring(1); 

     if (!url) { 
      return; 
     } 

     url = url + " #main-content-container"; 

     $mainContent.animate({opacity: "1.0"}).html('<div id="loading">Loading the next page for you. Please stand by!</div>').load(url, function() { 
      $mainContent.animate({opacity: "1"}); 
      $.getScript('http://www.trekradio.net/dev/wp-content/themes/tr2012/js/inner-scripts.js', function() {}); 
      $.getScript('http://ui.jquery.com/latest/ui/effects.core.js', function() {}); 
      $.getScript('http://twitter.com/javascripts/blogger.js', function() {}); 
     $.getScript('https://api.twitter.com/1/statuses/user_timeline.json?screen_name=trekradio&include_rts=1&count=3&callback=twitterCallback2', function() {});  
     }); 
    }); 

    $(window).trigger('hashchange'); 
}); 

Answer 2

這是因爲你提供了一個選擇表達你的URL的一部分：

http://api.jquery.com/load/

每文檔：

但是，在以下情況下，在文檔中的腳本塊是加載到#b中的 被剝離並且未被執行：

$('#b').load('article.html #target') 

你的URL的選擇：

url = url + " #main-content-container"; 

Answer 3

我知道你自己已經回答了這個問題，但這是另一種方式。

在wordpress中製作ajax請求的傳統方法是使用admin-ajax接口，如下所示：http://codex.wordpress.org/AJAX_in_Plugins。

這允許您將函數附加到ajax請求，並且該函數或多或少地在WordPress上下文中執行。所以，你可以寫的東西大致是這樣的你functions.php：

add_action('wp_ajax_trekradio_get_ajax_page', 'trekradio_get_ajax_page'); 
add_action('wp_ajax_nopriv_trekradio_get_ajax_page', 'trekradio_get_ajax_page'); 

function trekradio_get_ajax_page() { 

    $page_id = $_POST['page_id']; // send this in the ajax request 

    if (the page is a certain page that needs scripts) { 
     print_relevant_script_tags(); 
    } 

    print_page_content($page_id); 

    die(); // you have to do this at the end 
}