1

背景：我正在尝试使用 .load() 从多个页面构建站点，用户可以在其中单击按钮以使用 .load() 加载下一页的内容。

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

代码：我的起始页标记如下所示：

<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>

等等。

我的 jQueryscript.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() 请求有效的任何想法？

4

1 回答 1

0

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

$(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()在任何一个阶段通过整个文档（从根开始）侦听任何新元素。您的初始代码正在寻找仅在页面加载时出现的元素。

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

于 2013-10-25T18:12:51.913 回答