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

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

因此，您可以说：

而不是使用.click（）函数

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

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

1 个答案: