0

我正在一个网站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
                    });
                });
            };
        });
    });
});

});

4

2 回答 2

1

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

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

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

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

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

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

您需要在页面首次加载时以及完成回调中的 AJAX 调用之后调用此函数：

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

您也可以使用委托（“实时”）事件来消除其中的一些问题，但最好点击jQuery 文档了解这些事件是如何工作的。

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

$(window).on('load resize', function() {
    var $missionContent = $('#missionContent');
    if ($missionContent.length) {
        $missionContent.css(...);
    }
});
于 2012-11-02T21:54:43.183 回答
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 的成功加载触发。

于 2012-11-02T21:55:26.180 回答