如何仅在 jQuery Mobile 应用程序中触发显示和隐藏一页的事件

Question

好的，所以我开始使用 jQuery Mobile。我远非 javascript 专家。 jQuery Mobile 很酷，但它让我在这个问题上难住了。

我需要在显示某个页面时运行一些代码，然后在隐藏时运行另一个代码 - 但只需要层次结构的某个页面。我知道如何使用 pagecreate 和 pageshow 事件（并且已经使用它们来处理需要在每个页面上运行的代码）。但是，我需要能够检测特定页面何时显示以及何时隐藏。

那么我尝试了什么？我在页面上的以下标签上放置了一个自定义属性：

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

然后在 pageshow 事件中，我使用 jqmData() 来搜索该元素。这样就成功了，第一次遇到页面，然后就不行了。由于 JQM 加载页面的方式，该标签和该属性总是在 dom 中找到，即使我移动到其他页面，因为 JQM 正在使用巧妙的 ajax 显示/隐藏页面。

我花了好几个小时寻找解决方案 - 但我的 javascript 技能不存在。我想这很容易，所以我觉得寻求帮助有点愚蠢。

Answer 1

你需要给页面添加一个id并使用live live()来触发需要的事件，Live Example：

• 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>