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个例子，你可以在页面底部找到它们。

事件绑定示例1：

// 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!');            
});

PhoneGap，第一页上的jQuery Mobile页面init不会触发

1 个答案: