Question

我很遗憾这个长标题，但它足以代表问题。

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

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

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

第二 - 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
}

Wordpress＆amp; AJAX - 使用AJAX加载内部页面可防止Javascript在内部页面上运行

3 个答案: