使用ajax加载动态大小的页面答案

【问题标题】：Loading dynamically sized page with ajax使用ajax加载动态大小的页面
【发布时间】：2012-11-03 04:04:05
【问题描述】：

我有一个网站使用全宽背景图像以及动态大小的 div 来实现单页平滑滚动。

链接是http://teneo.telegraphbranding.com/。

我想通过 ajax 加载 about.php，这样侧边栏就不必重新加载，但我没有任何运气。

当您单击侧边栏中的“关于”时，关于页面未正确呈现。似乎容器忽略了 jquery。除了底层背景图片外，它们应该紧靠边栏，但不能越过它。

我正在使用此脚本加载页面：

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

此外，它不会加载几个没有任何内容但有背景图像并且应该填满屏幕的 div。

$(document).ready(function () {
var snapshotWrap = $('#snapshot-wrap');
var w = $(window);
w.bind('load resize',function() {
    snapshotWrap.css({ width:w.width(), height:w.height()});
});

});

$(document).ready(function () {
var snapshotContent = $('#snapshot-content');
var w = $(window);
w.bind('load resize',function() {
    snapshotContent.css({ width:w.width() - 205 });
});

});

我是否正确使用 jquery/ajax 加载页面？

【问题讨论】：

从你的问题中不清楚 about.php 是否正在加载，如果是，那么你的 ajax 不一定是问题，这只是背景图像和样式问题吗？
about.php 正在加载。它引入了内容，但似乎忽略了 about.php 应该使用的所有其他 javascript 函数。当我直接链接到 about.php 时，javascript 加载正常，将 div 容器的大小调整为浏览器窗口等，但当我通过 jquery/ajax 加载页面时则不然。但是，它无法显示为空但仍具有 bg 图像集的 div。

标签： css ajax jquery

【解决方案1】：

当您使用 ajax 加载页面的元素时，为了让 jquery 使用这些元素，您必须在加载后将事件处理程序附加到这些新元素。查看 .on() 的文档以了解如何执行此操作，一旦您阅读了该页面就会清楚。如果您再次卡住，请务必提出一个新问题。

因此，您可能会说，不要使用 .click() 函数：

$("#object").on("click", function(event){
alert($(this).text());
});

【讨论】：

谢谢。我会去做的。我很感激。