Question

背景：我正在尝试使用.load（）来构建一个网站页面，用户可以单击按钮加载下一页的页面内容使用.load（）。

问题：。load（）仅适用于第一次点击（加载来自pagetwo.html的内容，然后不加载任何内容之后页面的内容。

CODE ：我的起始页面标记如下所示：

<head>
<script src="script.js"></script>
</head>
<body>

<div class="content">
<p>This is page 1.</p>
<button id="pageone">next</button>

</div>
</body>

然后我的2-5页只包含要加载的部分HTML 进入div.content：

第2页：

<p>This is page 2.</p>
<button id="pagetwo">next</button>

第3页：

<p>This is page 3.</p>
<button id="pagethree">next</button>

等

我的jQuery script.js只加载一次，完整的起始页面为html：

$(document).ready(function() {

//load pages
$('button#pageone').click(function () {
$("div.content").load("page-two.html");
});
$('button#pagetwo').click(function () {
$("div.content").load("page-three.html");
});
$('button#pagethree').click(function () {
$("div.content").load("page-four.html");
});

});

关于为什么只有第一个.load（）请求有效的任何想法？

Answer 1

ID #pagetwo以及之后是第一个初始$(document).ready()之后新引入的DOM元素。因此，您必须以不同方式访问它：

$(document).on('click', 'button#pageone', function() {
   $("div.content").load("page-two.html");
});

$(document).on('click', 'button#pagetwo', function() {
   $("div.content").load("page-three.html");
});

$(document).on('click', 'button#pagethree', function() {
   $("div.content").load("page-four.html");
});

.on()处理程序将在任何一个阶段通过整个文档（从根目录开始）侦听任何新元素。您的初始代码正在查找仅页面加载时出现的元素。

要了解有关它的更多信息，请参阅“{em>直接和委派活动”中有关新元素的.on()处理程序的文档。

使用.load（）按顺序加载一系列HTML文档

1 个答案: