2

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

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

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

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

2 - http://www.trekradio.net/dev/ - 转到主页面，然后单击主菜单上的“计划” - 它使用 AJAX 加载计划页面，但是，页面上的所有脚本现在都丢失了或没有被执行。

我已经尝试了很多方法来解决这个问题 - 在计划页面上，一些脚本嵌入到页面本身中，我尝试将它们移动到标题中，希望因为标题没有重新加载，脚本可能会运行- 他们没有。

另外，我尝试了这里提到的解决方案：在 AJAX 检索的 <div> 中执行 <script> - 它谈到使用动态脚本模式，但是，我要么无法使其正常工作，要么无法正常工作在我想要完成的事情的背景下正确地进行。

我也尝试使用这里建议的解决方案：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');
});

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

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

4

3 回答 3

2

这是因为您提供了一个选择器表达式作为 URL 的一部分：

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

根据文档：

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

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

您的网址有选择器：

url = url + " #main-content-container";
于 2012-05-24T18:28:12.430 回答
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');
});
于 2012-05-27T16:58:33.023 回答
1

我知道你自己已经回答了这个问题，但这是另一种方法。

在 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
}
于 2012-05-31T10:25:14.703 回答