Wordpress & AJAX - 使用 AJAX 加载内部页面会阻止 Javascript 在内部页面上运行

Question

我很抱歉这个长标题，但它充分代表了问题。

我正在尝试在我的 WordPress 网站上使用 AJAX 来加载内页。我有这个功能，但是，当加载内页时，任何打算在这些内页上加载和运行的 Javascript/jQuery 都没有运行/加载。

有两个步骤可以查看并重新创建问题：

1st - 看看这个页面：http://www.trekradio.net/dev/schedule - 这个页面包含一个时间表 - 日期是标签，当你点击一个时间表项目时，它会打开一个 jQuery 弹出窗口。右侧边栏也使用了 Javascript，在“支持我们”小部件中，下拉菜单是基于 JS 的，而且 Twitter 提要使用 Twitter API 脚本加载。如您所见，所有脚本都存在并且工作正常。

2nd - http://www.trekradio.net/dev/ - 转到主页面，然后单击主菜单上的“计划” - 它使用 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');
});

根据我通过 Google-ing 发现的信息 - 许多人的 AJAX 网站存在此类问题，难以让脚本在加载的页面上运行，因此我希望这里的人们可以帮助提出解决方案，不仅我可以申请到我的网站，其他人也可以在他们的网站上使用。

如果人们能在他们的答案中包含代码，或者至少清楚地解释我如何修改代码来完成所需的事情，我将不胜感激。我仍在学习 jQuery/AJAX，所以也许我很愚蠢，忽略了一个相对简单的解决方案，但我怀疑，整个社区以及我自己都会欣赏有据可查的答案。

Answer 1

这是因为您在 URL 中提供了一个选择器表达式：

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

根据文档：

但是，在以下情况下，文档中的脚本块被 加载到 #b 中的内容被剥离而不执行：

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

您的网址有选择器：

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

Answer 2

我想我已经为自己解决了这个问题 - 我不确定它是否是最优雅的解决方案，但它似乎有效。

基本上，我已将所有将加载到我的内页上的脚本放入一个名为“inner-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 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
}