使用.load()顺序加载一系列HTML
使用.load()顺序加载一系列HTML
提问于 2013-10-25 18:08:12
后台：我尝试使用.load()从几个页面构建一个站点，用户可以单击一个按钮来使用.load()加载下一页的内容。
PROBLEM：.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>等。
我的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()请求才能工作有什么想法吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-10-25 18:12:51
ID、#pagetwo和on是在第一个初始$(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()处理程序将在任何一个阶段通过整个文档(从根开始)侦听任何新元素。您的初始代码正在寻找仅在页面加载时出现的元素。
要了解更多有关它的信息，请参阅有关.on()处理程序有关“直接和委托事件”中的新元素的文档。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19596681
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号