javascript - 如何仅在 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示例:

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