Question

我正在尝试使用jquery mobile创建一个动态的phonegap应用程序，但在使用转换转到页面时加载javascript时遇到了一些问题。

我的索引页面如下所示：

<body>
<div data-role="page" id="homePage">

    <div data-role="header" data-theme="c" data-position="fixed">
        <h1>My Page</h1>
    </div>

    <div data-role="content" id="pageName"> 
        <ul data-role="listview">
            <li><a href="pages/clubpage.html?userid=48">This is a test</a></li>
        </ul>   
    </div>

</div>
</body>

在我的“页面/俱乐部页面，html”中，我已将其包含在下方：

$(document).on('pageshow', function (){
    alert("I am here!");
});

不知怎的，我没有得到警报？我做错了什么？

请提前帮助和感谢： - ）

＆lt; -------编辑---------＆gt;

我实际上正在尝试转到第2页，该页面有一个动态生成的列表视图，如下所示：

$(document).on('pageshow', '#clubPage',function (){ // GET THE CURRENT CLUBPAGE //

    var clubid = getUrlVars()["clubid"];
    $.getJSON("http://mypage.com/groupmenu.php?callback=?&userid="+userid+"&clubid="+clubid,          
        function(data){
            var content = []
            $.each(data , function(i,val){

                content.push(val.list);

            });

        $("#mathes_list_count").html(content.join(""));
        $('#mathes_list_count').listview('refresh');

    });

});

现在我的问题是......我可以在转换之前生成这个吗？

Answer 1

您没有得到任何东西，因为委派的页面事件需要2个对象，一个原始文档和第二个对象，您丢失的同一个。在您的情况下，它是页面ID：

$(document).on('pageshow', '#homePage',function (){
    alert("I am here!");
});

但这不是你真正的问题。

要了解这种情况，您需要了解jQuery Mobile的工作原理。它使用ajax加载其他页面。

第一页正常加载。它的HEAD和BODY被加载到DOM中，它们在那里等待其他内容。加载第二页时，只将其BODY内容加载到DOM中。

在我的其他答案中阅读更多相关内容，您还可以找到解决方案和示例： Why I have to put all the script to index.html in jquery mobile

编辑：

这里有两种可能的解决方案。您可以在页面上执行getJson，在 pagebeforecreate 事件期间存储其内容并在另一个页面上重建它。看看我的另一个答案如何在转换之间存储数据，在页面转换之间搜索主题数据/参数操作： jQuery Mobile: document ready vs page events 。

或者，您可以在 pagebeforecreate 或 pageinit 事件期间初始化页面转换并加载/构建所有数据。在pageshow活动期间，这仍然比做更好。

在我看来，解决方案1是一个更好的解决方案，因为过渡不会受到影响，如果使用了pageshow事件，数据也不会神奇地出现。

页面转换后执行javascript

1 个答案: