0

我想在我的代码中的特定区域手动触发页面加载事件。我正在使用 jquery mobile，phonegap。

例如：

function jsonCallback(){
    // do some thing
    pageLoad('#page2');
}

pageLoad(){
    // trigger page2 load event
}

$(document).on("pageload", "#page2", function(e) {

});

编辑：我正在使用 Phonegap deviceready 事件，其中将创建数据库

document.addEventListener( 'deviceready', onDeviceReady, false );

function onDeviceReady() {
     //code to generate db
     //now i need to trigger the page1 pageshow event where it will fetch the result from database
}

有任何想法吗 ？

谢谢

4

1 回答 1

2

您不能手动触发页面事件，因为它们不是那样工作的。

它们只会在某些情况下（例如页面初始化）或在您使用$.mobile.loadPage()函数的情况下自动触发。

此外，我认为您不想触发pageload事件，因为就像我之前告诉您的那样，它只会在$.mobile.loadPage()函数之后触发。该函数不接受#page作为参数，而是必须提供一个真正的 html 文件。

或者您可以像这样启动 changePage 函数：

$.mobile.changePage("#page2");

此函数可以与#page 参数一起使用。还可以使用$.mobile.changePage()触发另一件事 pageload 事件，但前提是打开另一个 html 文件，就像使用 $.mobile.loadPage()函数一样。

编辑 ：

不幸的是，您的评论解决方案将不起作用。仅仅因为您可以暂停页面加载。但没有什么能阻止你作弊。让您的初始页面为空，使用其页面事件查询数据库并动态创建索引页面。然后只需将页面更改为#index 页面。这是唯一可以做到的方法。

工作示例：http: //jsfiddle.net/Gajotres/g7S58/

在此示例中，我没有查询数据库，因为我没有任何数据库，但示例类似，因为我正在创建动态页面内容并将其附加到第二个 #index 页面。这是唯一没有问题的方法。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="hidden">

        </div>   
        <div data-role="page" id="index">
            <div data-theme="b" data-role="header">
                <h1>Index page</h1>
            </div>

            <div data-role="content">

            </div>
        </div>          
    </body>
</html>

Javascript：

$(document).on('pagebeforecreate', '#hidden', function(e){ 
    $("<ul>").attr({'data-role':'listview','data-inset':'false','id':'mylist'}).append('<li><a>List element 1</a></li>').appendTo($('#index [ data-role="content"]'));
    $.mobile.changePage('#index');
});
于 2013-05-13T08:09:58.687 回答