我對jquery-mobile很新。有人可以幫助解決關於多頁面應用程序的下列問題嗎?在多頁jquery-mobile應用程序中註冊事件?
我的應用程序有兩個頁面,分爲兩個不同的文件 - 下面給出的index2_1.html和index2_2.html。當我使用$ .mobile.changePage(「index2_2.html」,「幻燈片」);要切換到第二頁,第二頁中的任何事件都不會受到約束。實際上,第二頁上的Javascript都不會被執行。但是,如果移動到第二頁使用鏈接
<a href="index2_2.html" target="_blank">Link to 2nd page that works1</a>
它工作正常。
有人能告訴我我在做什麼錯在這裏嗎?
感謝, 迪利普
index2_1.html
<!DOCTYPE html>
<html>
<head>
<title>Account Diary Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script>
alert("Trying to register events on page 1.");
$(function() {
$(".category_item").bind("tap", function(event) {
selected_category = $(this).text();
$("#selected_category").text(selected_category);
$.mobile.changePage("index2_2.html", "slide");
});
});
</script>
</head>
<body>
<div data-role="page" id="select_category">
<div data-role="header" data-backbtn="false">
<h1>Select Category</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-theme="g">
<li class="category_item"><a href="">Grocery</a></li>
<li class="category_item"><a href="">Car</a></li>
<li class="category_item"><a href="">Recreation</a></li>
<li class="category_item"><a href="">Health</a></li>
</ul>
<div>
<a href="index2_2.html" target="_blank">Link to 2nd page that works1</a>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
index2_2.html
<!DOCTYPE html>
<html>
<head>
<title>Account Diary Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script>
alert("Trying to register events on page 2.");
$(function() {
$(".description_item").bind("tap", function(event) {
selected_description = $(this).text();
$("#expense_description").val(selected_description);
description = $("#expense_description").val();
$.mobile.changePage($("#enter_amount"), "slide");
});
});
</script>
</head>
<body>
<div data-role="page" id="enter_description">
<div data-role="header" data-backbtn="false">
<h1>Enter/Select Description</h1>
</div><!-- /header -->
<div data-role="content">
<label for="name">Description:</label>
<input type="text" name="expense_description" id="expense_description" value="" />
<a id="n_button" href="#" data-role="button" data-theme="b" data-inline="true" >Next</a>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Recent Expenses</li>
<li><a class="description_item" href="">Safeway</a></li>
<li><a class="description_item" href="">Gas</a></li>
<li><a class="description_item" href="">Cell phone bill</a></li>
<li><a class="description_item" href="">rent</a></li>
</ul>
<div data-role="controlgroup" data-type="horizontal">
<center>
<a class="cancel_button" href="index.html" data-role="button" rel="external">Cancel</a>
</center>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
This asnwer is correct,but not complete。將腳本標記添加到頁面div不是很乾淨,所以如果代碼不是太長,我建議將它放在.js文件中幷包含在所有子頁面的頭部。要使其與pagebeforeshow或pagecreate一起使用,只需使用正確的選擇器將'data-url'屬性設置爲文件名 – naugtur 2011-06-01 08:30:32
jqx.ca鏈接不起作用。你能否更新它?謝謝! – 2013-01-14 09:52:08