通过 ajax 加载的子页面正在杀死 jquery 功能答案

【问题标题】：subpage loaded through ajax is killing jquery functionality通过 ajax 加载的子页面正在杀死 jquery 功能
【发布时间】：2012-11-02 21:06:03
【问题描述】：

我在一个网站上工作，http://teneo.telegraphbranding.com/，我希望通过 ajax 加载页面，以便侧边栏及其动画保持一致。

单击“关于”链接时，我需要它通过 jquery ajax 函数加载 about2.php。但我没有任何运气。当我可以通过 ajax 加载页面时，它会杀死页面上的所有 jquery 功能。从我读过的内容来看，我认为我需要在成功完成 ajax 调用后调用 jquery。

我已经尝试了所有看起来的方法，但无法正常工作。我需要的是 about2.php 在单击链接时加载，并且 jquery 可以动态调整 div 的大小，就像在主页上一样。我试过这个，但它甚至不会加载页面：

//Dropdown
$(document).ready(function () {
var dropDown = $('.dropdown');
$('h3.about').on('click', function() {
    dropDown.slideDown('fast', function() {
        var url = 'about2.php'

        $.get(url, function(data) {

        //anything in this block runs after the ajax call

            var missionWrap = $('#mission-wrap');
            var w = $(window);
            w.on('load resize',function() {
                missionWrap.css({ width:w.width(), height:w.height()});
            });
            var missionContent = $('#mission-content');
            var w = $(window);
            w.on('load resize',function() {
                missionContent.css({ width:w.width() - 205 });
            });
        });
    });
});

});

然后这会加载页面，但会杀死所有与之关联的 jQuery：

var dropDown = $('.dropdown');
$('h3.about').on('click', function() {
    dropDown.slideDown('fast', function() {
        $('#index-wrap').load('/about2.php');
    });
});

非常感谢。

我也试过这个，但它破坏了一切：

$(document).ready(function () {
var dropDown = $('.dropdown');
$('h3.about').on('click', function () {
    dropDown.slideDown('fast', function () {
        $.ajax({
            type: 'GET',
            url: 'about2.php',
            success: function () {
                var missionWrap = $('#mission-wrap');
                var w = $(window);
                w.on('load resize', function () {
                    missionWrap.css({
                        width: w.width(),
                        height: w.height()
                    });
                });
                var missionContent = $('#mission-content');
                var w = $(window);
                w.on('load resize', function () {
                    missionContent.css({
                        width: w.width() - 205
                    });
                });
            };
        });
    });
});

});

【问题讨论】：

以一种可用的方式正确地做一个单页应用程序是很多工作。你确定动画侧边栏值得费心吗？
是的。我以前做过单页网站，所以我很熟悉它 - chiaroscurofnd.org。让我失望的只是 ajax。
该页面上的神秘肉链接画是否应该以诱发癫痫的方式闪烁，直到子页面完成加载？该网站的子页面也不能加入书签。
考虑改写你的标题，因为它完全没有任何意义。
@lanzz 对不起，我更正了。

标签： ajax jquery

【解决方案1】：

这应该可行。

function resize_me () {
    var w = $(window);
    var missionWrap = $('#mission-wrap');
    var missionContent = $('#mission-content');
    missionWrap.css({ width:w.width(), height:w.height()});
    missionContent.css({ width:w.width() - 205 });
}

//Dropdown
$(document).ready(function () {
    $(window).on('load resize', function () {
        resize_me();
    });
    var dropDown = $('.dropdown');
    $('h3.about').on('click', function() {
        dropDown.slideDown('fast', function() {
            var url = 'about2.php'

            $.get(url, function(data) {
                resize_me();
            });
        });
    });
}

我认为问题在于您附加到窗口对象的加载事件没有被 $.get 的成功加载触发。

【讨论】：

非常感谢@manishie！它工作得很好。我非常感谢你花时间去做这件事。希望以后能帮到你。
不会 $(window).on('load resize', function () { resize_me(); });调用 resize_me() 方法两次，第一次加载页面？
AFAIK，它不会调用它两次（尽管这可能取决于浏览器）。我刚刚做了一个快速测试，显示附加到加载和调整大小事件的警报，它只在窗口加载时显示一次。
你说的完全正确。在 Safari 和 Firefox 的 mac 上，它被调用了两次。但在 PC 上只调用一次。

【解决方案2】：

这是如何构建应用程序以正确处理此问题的粗略概述。

假设你的 HTML 看起来像这样：

<html>
...
<div id="index-wrap">
    <!-- this is the reloadable part -->
    ...
</div>
...
</html>

您需要重构所有对 #index-wrap 内元素的 jQuery 增强功能，以便在重新加载后可以调用的函数中：

function enhance(root) {
    $('#some-button-or-whatever', root).on('click', ...);
}

（即查找使用 AJAX 加载的根元素下的所有元素。）

页面第一次加载时需要调用该函数，完成回调中AJAX调用后也需要调用：

$('#index-wrap').load('/foo.php', function() {
    enhance(this);
});

您也可以使用委托（“实时”）事件来消除其中的一些问题，但最好点击jQuery documentation on how those work。

对于绑定到window 的事件或未动态加载的 DOM 元素，您根本不需要根据加载的子页面重新绑定它们，只需检查加载的哪些元素在处理程序中你设置一次：

$(window).on('load resize', function() {
    var $missionContent = $('#missionContent');
    if ($missionContent.length) {
        $missionContent.css(...);
    }
});

【讨论】：

非常感谢。这为我清除了很多东西。另外，我感谢在 chiarascuro 网站上的反馈。你能告诉我关于让后退按钮触发平滑滚动的任何信息吗？
@jtrinker 您需要使用pushState() API 让浏览器识别“假”导航。调用此方法时，您可以关联描述您正在导航到的状态的任意对象。然后你听window.onpopstate；在该事件的处理程序中，您触发相应的转换以到达事件描述的状态。