[英]jQuery single page mobile app
我正在嘗試構建具有多個頁面的jQuery應用程序。 不同的頁面放置在不同的html文件中的位置。 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時,它只是顯示正在加載。
任何幫助都會很棒。
首先很抱歉,因為我在打字錯誤
<sciprt src="abc.js"></sciprt>
應該是(感謝@Ingo Burk指出來)
<script src="abc.js"></script>
其次,我嘗試使用
$('#second').append(msg.second);
$('#first').append(msg.first);
但是我沒有用
$('#second').html(msg.second);
$('#first').html(msg.first);
那解決了我的問題。 當您通過$.load()
加載頁面時,也不要在頁面中使用document.write()
$.load()
。 因此,我浪費了3天(感謝@Ram指出這一點)。 檢查https://github.com/jquery/jquery-mobile/issues/430
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.