0

我正在尝试使用 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>

在我的“pages/clubpage,html”上，我在头部包含以下内容：

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

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

请提前帮助和感谢:-)

<------- 编辑 --------->

我实际上是在尝试转到第 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');

    });

});

现在我的问题是......我可以在过渡之前生成它吗？

4

1 回答 1

3

您没有得到任何东西，因为委派的页面事件需要 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：文档准备好与页面事件。

或者您可以在pagebeforecreate或pageinit事件期间初始化页面转换并加载/构建所有数据。这比在 pageshow 事件期间执行此操作要好。

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

于 2013-05-11T13:05:40.480 回答