PhoneGap，第一页上的 jQueryMobile pageinit 不会触发

Question

我正在使用 jQueryMobile 和 PhoneGap 开发一个跨平台的移动应用程序。我正在绑定到应用程序中加载的第一页（“主页”页面），但 pageinit 事件不会触发。这是我的自定义 javascript：

$('#home').live('pageinit', function()
{
    alert('firing pageinit');
}

这是包含页面定义的 index.html 文件：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
    <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
    <link rel="stylesheet" href="css/custom.css" />
</head>
<body>
    <div data-role="page" id="home">
        <div data-role="header" data-position="fixed">
            <a href="#refresh" data-icon="refresh" data-transition="slide" id="refresh">Refresh</a>
            <h1>MyListingsApp</h1>
            <a href="#add_listing" data-icon="plus" data-transition="slide" id="add_listing_button">Add</a>
        </div>

        <div data-role="content">
            <ul data-role="listview" id="listings" data-filter="true" data-filter-placeholder="Filter listings...">
                <li id="hit_to_begin"></li>
            </ul>
        </div>

    </div>

<script type="text/javascript" src="cordova-2.2.0.js"></script>
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/jquery.mobile-1.2.0.min.js"></script>

    <script src="js/jquery.ui.map.full.min.js"></script>
    <script src="js/jquery.ui.map.services.min.js"></script>
    <script src="js/jquery.i18n.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
    <script type="text/javascript" src="js/custom.js"></script>

</body>

事件没有触发，我得到的只是加载的主页。根据 jQueryMobile 文档，这是处理页面初始化自定义的正确绑定。

Answer 1

看这个例子：http://jsfiddle.net/Gajotres/BGkaq/，我给你做了2个例子，你可以在页面底部找到它们。

事件绑定示例一：

// in (url^=home) home is a page id
$(':jqmData(url^=home)').live('pagebeforecreate',function (event) {
    alert('Event has been triggered!');            
});

事件绑定示例2：

$('#home').live('pagebeforecreate',function (event) {
    alert('Event has been triggered!');            
});