jQuery单页移动应用 [英] jQuery single page mobile app
问题描述
我正在尝试用多个页面构建一个jQuery应用程序。不同的页面放在不同的html文件中。
index.html
I am trying to build a jQuery app with multiple page. Where different pages are placed in different html files. index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dynamic Page Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<sciprt src="abc.js"></sciprt>
<div data-role="page" id="home" data-title="Welcome">
<div data-role="header">
<h1>Dynamic Page</h1>
</div>
<div data-role="content">
<input type=button id="changePage" value="Open dynamic page">
<!--<a href="abc.html" data-prefetch>abc</a>-->
</div>
<script>
$("#changePage").on("click", function() {
// Create page markup
// Enhance and open new page
$.mobile.changePage('abc.html');
});
</script>
</div>
</body>
</html>
abc.html
<div data-role=page data-url=hi id=abc>
<div data-role=header id=first>
<h1>
<script>
document.write(msg.first);</script>
</h1>
</div>
<div data-role=content id=second>
<script>
document.write(msg.second);</script>
</div>
</div>
abc.js
var msg = {
first : 'I am First',
second : 'I am Second',
third : 'I am Third'
};
我不明白我在做什么错，当没有javascript im abc.html然后它的作品，但是当我尝试使用js，它只是显示加载。
I don't understand where i am doing wrong.When there is no javascript im abc.html then it works, but when i try to use js, it just shows loading.
任何帮助将是伟大的....
Any help would be great....
推荐答案
首先非常抱歉，因为我在
First of all sorry because of the typo mistake i did at
<sciprt src="abc.js"></sciprt>
应该是（感谢@Ingo Burk指出）
It should be (Thanks to @Ingo Burk for pointing it out)
<script src="abc.js"></script>
其次我试图使用
$('#second').append(msg.second);
$('#first').append(msg.first);
但是，我没有使用
$('#second').html(msg.second);
$('#first').html(msg.first);
，解决了我的问题。
当您通过 $加载页面时，也不要在页面中使用。因为这个浪费了3天（感谢@Ram指出）。检查 https://github.com/jquery/jquery-mobile/issues/430 document.write（） load（）
and that solved my problem.
And also don't use document.write() in a page, when u are loading page via $.load(). I wasted 3 days because of this( thanks to @Ram for pointing it out). Check https://github.com/jquery/jquery-mobile/issues/430
这篇关于jQuery单页移动应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
