2

我有一个 jQuery Mobile 列表视图不刷新的问题，但仅在一个非常特殊的情况下。当我在 Android 手机（特别是 Google Nexus）上测试我的应用程序时，会出现此问题。问题发生在我的列表视图从视图 1 正确加载到视图 2 之后。然后我转到视图 3。当我从视图 3 转到视图 2 时，列表视图没有完全加载。我的意思是它确实正确地加载了我的代码，但是在我尝试选择其中一行之前它永远不会显示。一旦我选择了其中一行，它们就会突然出现。我正在创建我的列表视图，方法是在document.ready(). 我知道目前据说这是不好的做法，但是当我使用 jQuery 建议的方法时，document.bind('pageinit')它的工作时间为 3 到 2 但是每次我离开视图 2document.bind('pageinit')再次被解雇。有没有办法解决？谢谢！

4

1 回答 1

0

使用 jQuery Mobile 进行开发时要意识到的最重要的事情之一是在页面之间导航时不会卸载您的 javascript。这实际上意味着当您使用.bind()（或.on()，这是首选方式）时，离开页面时它不会解除绑定。这意味着您必须自己管理。

经过一番挣扎，我发现以下解决方案最适合我。加载所有的 javascript<head>并创建一个单独的 javascript 文件来处理诸如绑定之类的事情。页面导航不会卸载这些文件。该文件的概要如下。

$(document).on('pagebeforeshow', function(event){
    currentPageId = $(event.target).attr("id");
    //Give every <div data-role="page"> an id and switch on it.
    switch (currentPageId) {
        case "index":
            loadIndex();
            break;
        case "fooPage":
            loadFooPage();
            break;
        case "barPage":
            loadBarPage();
            break;
        default:
            break;
    }
});

在每次页面加载时，您将通过以下方式将所需的新功能绑定到该页面：

function loadIndex(){
    $(document).one("pageshow", function pageshow(event){
        console.log("Entered the index");
        $(window).on("scrollstart", someFunction);

        //Unbind everything when a new page is loaded.            
        $(document).one("pagebeforeshow", function pagebeforeshow(event){
            console.log("Exited the index")
            $(window).off("scrollstart", someFunction);
        });
    });
}

对要绑定内容的每个页面执行此操作。完成此操作后，您可以按照习惯执行 javascript 函数，因为它们会在每个页面显示时加载和卸载。

于 2012-09-28T14:37:44.180 回答