我有一个 jQuery Mobile 列表视图不刷新的问题，但仅在一个极其特殊的实例中。当我在 Android 手机（特别是 Google Nexus）上测试我的应用程序时，会出现此问题。当我的列表视图从视图 1 正确加载到视图 2 后，就会出现此问题。然后我转到视图 3。当我从视图 3 转到视图 2 时，列表视图不会完全加载。我的意思是，它实际上正确加载了我的代码，但是直到我尝试选择其中一行之前它永远不会显示。一旦我选择其中一行，它们就会突然出现。我正在通过附加 html 和 javascript 来创建列表视图document.ready()。我知道目前据说这是不好的做法，但是当我使用 jQuery 建议的方法时document.bind('pageinit')它可以从 3 到 2 工作，但是每次我离开视图 2document.bind('pageinit')再次被解雇。有没有办法解决？谢谢！
使用 jQuery Mobile 进行开发时要认识到的最重要的事情之一是，在页面之间导航时不会卸载 javascript。这实际上意味着当您使用.bind() (or .on()， 哪一个是首选方式 http://api.jquery.com/bind/) 离开页面时并没有解除绑定。这意味着您必须自己管理。
经过一番努力，我发现以下解决方案最适合我。将所有 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 函数，因为它们会在每个页面显示时加载和卸载。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
