2011-06-01 59 views
0

我對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> 

回答

1

相反Pravat Maskey的答案,這是可能的(並且依賴於使用情況還意)有獨立的HTML文件。想象一下有大量頁面的巨大應用程序,將所有內容加載起來都是違反直覺的。

我認爲你遇到的問題是JavaScript代碼的位置。我會嘗試在頁面部分包含特定於頁面的代碼(腳本標記及其包含的所有內容),位於頁面的結尾div上方。有關更多詳細信息,請參閱本指南:http://jqx.ca/nav/,並查看「jQuery Mobile Pages中的腳本」部分。

通過在主體中添加標籤,您的代碼在第一次創建子頁面時執行一次。對於你的情況,這應該起作用,因爲你將一個事件綁定到一個只需運行一次的DOM節點。

如果您希望每次顯示頁面時都運行它,您還可以嘗試使用pagebeforeshow事件註冊代碼。

+0

This asnwer is correct,but not complete。將腳本標記添加到頁面div不是很乾淨,所以如果代碼不是太長,我建議將它放在.js文件中幷包含在所有子頁面的頭部。要使其與pagebeforeshow或pagecreate一起使用,只需使用正確的選擇器將'data-url'屬性設置爲文件名 – naugtur 2011-06-01 08:30:32

+0

jqx.ca鏈接不起作用。你能否更新它?謝謝! – 2013-01-14 09:52:08

相關問題