Question

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

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

我已经尝试了它看起来的一切，但无法让它发挥作用。我需要的是在点击链接时加载的on2.php和动态调整div的大小的jquery，就像在主页上一样。我试过这个，但它甚至不会加载页面：

//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
                    });
                });
            };
        });
    });
});

}）;

Answer 1

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

假设您的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(...);
    }
});

Answer 2

这应该有用。

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的成功加载触发。

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

2 个答案: