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

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

ajax jquery

Ajax 使用.load（）顺序加载一系列HTML文档,ajax,jquery,Ajax,Jquery,背景：我正在尝试使用.load从几个站点构建一个站点页面，用户可以在其中单击按钮以加载下一页的内容使用.load 问题：加载仅在第一次单击加载时有效来自pagetwo.html的内容，然后不加载任何之后的页面内容代码：我的起始页标记如下所示： <head> <script src="script.js"></script> </head> <body> <div class="content"> <p&g

背景：我正在尝试使用.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>

关于为什么只有第一个.load请求有效，有什么想法吗？

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处理程序在任何一个阶段从根目录开始时，它将在整个文档中侦听任何新元素。您最初的代码是查找页面加载时出现的元素

要了解更多信息，请参阅有关处理程序的文档，其中涉及直接和委托事件中的新元素。

谢谢@MackieeE-问题已解决！即使在$document.ready内，.on也总是捕获新元素吗？@Marcatectura No problem dude=不，如果它是$somediv，.on总是捕获新元素。如果它是$somediv，.on“单击”，并且在加载点不在DOM中，单击将永远不会运行，因为它没有侦听$somediv，因为它不存在。如果您改为查找$document，它将沿着DOM树向下横切以查找。。我希望这是有道理的@Marcatectura如果你需要我澄清任何事情，请随时询问=

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

$(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");
});

});

$(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");
});