如何僅在jQuery Mobile應用程序中觸發顯示和隱藏一個頁面的事件

好的，所以我開始使用jQuery Mobile。我遠不是一個JavaScript專家。 jQuery Mobile非常酷，但它讓我難以理解這個問題。如何僅在jQuery Mobile應用程序中觸發顯示和隱藏一個頁面的事件

我需要在顯示某個頁面時運行某些代碼，然後在隱藏某個頁面時運行某些代碼 - 但僅在層次結構的某個頁面中顯示。我知道如何使用pagecreate和pageshow事件（並使用它們處理需要與每個頁面一起運行的代碼）。不過，我需要能夠檢測何時顯示特定頁面以及何時隱藏。

那麼我試過了什麼？我把一個自定義屬性下列標籤頁上：

<div data-role="content" myspecialattribute="true">

然後在pageshow事件，我用jqmData（）來搜索元素。這是成功的，第一次遇到頁面，然後不起作用。由於JQM加載頁面的方式，即使我移動到其他頁面，該標籤和該屬性始終可以在dom中找到，因爲JQM正在使用巧妙的ajax顯示/隱藏頁面。

我花了好幾個小時尋找解決方案 - 但我的JavaScript技能只是不存在。我認爲這很容易，所以我覺得有點愚蠢的求助。

來源

2011-08-19 iandotkelly

你需要一個ID添加到頁面，並使用同住（）來觸發事件所需，活生生的例子：

http://jsfiddle.net/phillpafford/U3VxB/

JS：

$('#page2').live('pageshow',function(event, ui){ 
    alert('Alert for page 2 only'); 
});

HTML：

<div data-role="page" id="home"> 
    <div data-role="content"> 

     <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
      <li data-role="list-divider">Navigation</li> 
      <li><a href="#page2">Page 2</a></li> 
     </ul> 

    </div> 
</div> 

<div data-role="page" id="page2"> 
    <div data-role="content"> 

     <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
      <li data-role="list-divider">Navigation</li> 
      <li><a href="#home">Home Page</a></li> 
     </ul> 

    </div> 
</div>

來源

2011-08-19 21:02:42

嗨，感謝您的快速和詳細的回覆。我會嘗試一下並回復你。 – iandotkelly

我遇到的一個複雜情況是，我正在使用帶有_layout.cshtml文件的佈局引擎（Razor），就像一個常見的「頁面」div一樣，所以我希望能夠使用「content」div來做到這一點。但是，如果這樣做，那麼我可能會放棄共享佈局文件。 – iandotkelly

+1，檢查。那很好，謝謝。是的，我需要從主佈局頁面移動「頁面」div，但它工作得很好。謝謝。 – iandotkelly

如何僅在jQuery Mobile應用程序中觸發顯示和隱藏一個頁面的事件

回答

相關問題