css - 使用ajax加载动态大小的页面

Question

我有一个网站，它利用全宽背景图像以及动态大小的 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 加载页面？

Answer 1

When you load elements of a page with ajax, in order for jquery to use those elements, you have to attach event handlers to those new elements after they have loaded. Look up the documentation for .on() to see how to do this, it will be clear once you've read that page. If you get stuck again, be sure to make a new question.

So instead of using the .click() function you might say:

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