我开始学习移动应用程序开发，但我已经遇到了障碍。我有以下文件:
1. android.html
2. index.html
3. android.js
android.html 充当加载页面，并在页面加载时将 index.html 链接拉入其中。当点击链接时，它的唯一目的是将远程页面的数据从 #content div 加载到 android.html 的 #container div 中。但这似乎对我不起作用。
代码如下:
android.html:
<!DOCTYPE html>
<html>
<head>
<title>Jonathan Stark</title>
<meta name="viewport" content="user-scalable=no, width=device-width" />
<link rel="apple-touch-icon-precomposed" href="myCustomIcon.png" />
<link rel="stylesheet" href="css/android.css" type="text/css" media="screen" />
<script src="cordova-1.6.1.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="android.js"></script>
</head>
<body>
<div id="header"><h1>Test</h1></div>
<div id="container"></div>
</body>
</html>
index.html:
<html>
<head>
<title>Jonathan Stark</title>
<meta name="viewport" content="user-scalable=no, width=device-width" />
<link rel="stylesheet" type="text/css" href="android.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="explorer.css" media="all" />
<![endif]-->
<script src="cordova-1.6.1.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="android.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="./">Jonathan Stark</a></h1>
<div id="utility">
<ul>
<li><a href="about.html">About</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="nav">
<ul>
<li><a href="consulting-clinic.html">Consulting Clinic</a></li>
<li><a href="on-call.html">On Call</a></li>
<li><a href="development.html">Development</a></li>
<li><a href="http://www.oreilly.com">O'Reilly Media, Inc.</a></li>
</ul>
</div>
</div>
<div id="content">
<h2>About</h2>
<p>Jonathan Stark is a web developer, speaker, and author. His consulting firm, Jonathan Stark Consulting, Inc., has attracted clients such as Staples, Turner Broadcasting, and the PGA Tour. ...</p>
</div>
<div id="sidebar">
<img alt="Manga Portrait of Jonathan Stark" src="jonathanstark-manga-small.png">
<p>Jonathan Stark is a mobile and web application developer who the Wall Street Journal has called an expert on publishing desktop data to the web.</p>
</div>
<div id="footer">
<ul>
<li><a href="services.html">Services</a></li>
<li><a href="about.html">About</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
<p class="subtle">Jonathan Stark Consulting, Inc.</p>
</div>
</div>
</body>
</html>
我几乎使用它作为所有链接/远程页面的基页。只需更改上面 #content div 中的 h2 标签标题即可。
android.js:
$(document).ready(function() {
loadPage();
});
function loadPage(url){
if (url == undefined){
$('#container').load('index.html #header ul',hijackLinks);
}
else{
$('#container').load(url + '#content',hijackLinks);
}
}
function hijackLinks(){
$('#container').click(function(e) {
e.preventDefault();
loadPage(e.target.href);
});
}
有人能告诉我为什么当我点击链接时上面的代码显示整个页面，而它的意思是只抓取远程页面的#content div？
谢谢!
最佳答案
如果字符串中包含一个或多个空格字符，则假定第一个空格后面的字符串部分是一个 jQuery 选择器，用于确定要加载的内容。
换句话说，在第二个 .load() 调用中，您需要在 url 和 #content 之间留一个空格，否则 jQuery 会认为它是一部分网址。
更改:
$('#container').load(url + '#content',hijackLinks);
致:
$('#container').load(url + ' #content',hijackLinks);
此外，您的点击监听器应该在文档就绪回调中调用。传入加载回调的函数实际上是一个success回调，在ajax调用成功时执行。当然，它仍然会在文档就绪时被调用，因为它是在第一次加载完成时运行的，但这种方式并不完全清楚，也没有必要将其放在那里。您可以从对 .load() 的调用中删除 hijackLinks。
$(document).ready({ hijackLinks(); loadPages(); });
附注如果 hijackLinks 应该在链接点击时执行，请将 .click 方法中的选择器从 #container 更改为 #container一个。
关于jquery - AJAX/JQuery 加载整个页面而不是 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11387924/