Question

我对这个长篇大论感到非常遗憾,但它充分代表了这个问题。

我试图在我的 WordPress 网站上使用 AJAX 来装载内部页面。但是,在装入内部页面时,任何 Javascript/jQuery 想要在这些内部页面上装载和运行的 Javascript/jQuery 都不在运行/装入中。

有两个步骤来观察并重现问题:

1 - 看看这个页面: < a href="http://www.trekradio.net/dev/schedule" rel=“nofollow noreferrer” >http://www.trekradio.net/dev/schedule - 这个页面包含一个时间表 - 日数是制表, 当您点击一个时间表项目时, 它会打开一个 jQuery 弹出。 Javascript 也用于右侧栏, 在“ 支持我们” 部件中, 下调以 JS 为基础, 以及使用 Twitter API 脚本的推特回馈负载。正如您所看到的, 所有脚本都存在并且运作良好。

2 -<,http://www.trekradio.net/dev/" rel="nofollown noreferrer" > - 转到主页,然后单击主菜单上的“时间表” - 它用AJAX在时间表页面上加载,然而,该页面上的所有脚本现在都缺失或尚未执行。

我尝试过很多事情来解决这个问题-在计划页上, 有几个脚本嵌入了页面本身, 我试着把这些脚本移到页眉中, 希望由于页眉没有重新加载, 脚本可能会运行—— 它们没有运行。

此外,我还尝试了这里提到的解决方案: 执行 & lt; standic> 由 AJAX < /a> 检索到的 <div> 内部的描述 & lt; div> - 它谈论使用动态脚本模式, 但是, 我或者没有能力使它正确运作, 或者, 在我试图完成的任务中, 它不适当运作。

我还尝试了使用这里建议的解决办法:jquery html () 删掉了脚本标签 ,然而,我再次无法让它工作。

以下是我的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 );
});

许多人在AJAX网站有这种问题, 努力想让剧本在满载页面上运行, 所以我希望这里的人能帮助找到一个解决方案, 不仅我可以申请到自己的网站, 其他人也可以在自己的网站上使用。

如果人们能把代码和答案包含在内,或者至少明确解释我如何能够修改代码以完成需要的东西。我仍然在学习jQuery/AJAX,所以也许我是愚蠢,忽略了相对简单的解决方案,但我认为,整个社区以及我本人都会感谢文件翔实的答案。

Answer 1

我想我已经为自己解决了这个问题—— 我不知道它是否是最优雅的解决方案, 不管它看起来如何有效。

基本上,我拿走了所有会载入我内部页面的脚本, 把它们放入一个名为“内部脚本. 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/

每一文件:

However, in the following case, script blocks in the document being loaded into #b are stripped out and not executed:

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

您的 URL 有选择器 :

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

Answer 3

我知道你自己回答了问题但这是另一种方法

通常在单词压盘中提出ajax要求的方式是使用此处所记载的行政管理界面:http://codex.wordpress.org/AJAX_in_Plugins 。

这将允许您将一个函数附加到 ajax 请求中, 而该函数在 WordPress 的上下文中或多或少地执行。这样您就可以在您的 < code> 函数.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
}

友情链接