每当我尝试运行时,它们都会弹出“ Uncaught TypeError: Cannot call method 'changePage' of undefined
”错误。我认为loginPage创建中存在错误。任何人都可以帮助解决以下错误。任何帮助,将不胜感激。谢谢
function deviceReady() {
console.log("deviceReady");
$(document).on("pagecreate", "#loginPage", function () {
alert("pageinit run");
$("#loginForm").on("submit", handleLogin);
checkPreAuth();
});
$.mobile.changePage("#loginPage", {
transition: "pop",
reverse: false,
changeHash: false
});
}
最佳答案
发生了什么
你做错了一切。
首页事件不应该在Cordova / Phonegap deviceReady()函数中调用,没有意义。将其移到更高的位置,此代码不在乎设备是否准备就绪,将在您切换到#loginPage页面时执行。这通常是在Phonegap处于deviceReady()状态之后的方式。
其次,您无法在deviceReady()函数内执行changePage函数。 jQuery Mobile未正确初始化,页面容器也不可用。因此,如果DOM中仍然没有页面事件,就无法更改页面。
第三件事,假设假设在deviceReady()状态期间页面容器可用(这是不正确的),这仍然不起作用,因为此时jQuery Mobile将尝试初始化初始HTML文件中的第一页,而您不能只是停止它与另一个更改页面。
基本上,您的代码应类似于以下内容:
function deviceReady() {
console.log("deviceReady");
}
$(document).on("pageshow", "#someInitialPage", function () {
$.mobile.changePage("#loginPage", {
transition: "pop",
reverse: false,
changeHash: false
});
});
$(document).on("pagecreate", "#loginPage", function () {
alert("pageinit run");
$("#loginForm").on("submit", handleLogin);
checkPreAuth();
});
我们学到了什么
切勿将这样的Phonegap和jQuery Mobile代码混合使用,除非有充分的理由将它们混合使用,否则它们应始终单独运行
页面事件应始终单独运行
您无法在初始化第一页之前启动changePage(有一种方法,但只有在需要时才会显示给您)
changePage只能在某个页面事件期间或在某个页面事件期间初始化的任何函数中初始化。基本上,页面容器必须存在,然后pageChange才能发生。
如果您真的需要在初始化Phonegap和jQuery Mobile时运行一些代码,请使用以下代码:
var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();
document.addEventListener("deviceReady", deviceReady, false);
function deviceReady() {
deviceReadyDeferred.resolve();
}
$(document).one("mobileinit", function () {
jqmReadyDeferred.resolve();
});
$.when(deviceReadyDeferred, jqmReadyDeferred).then(doWhenBothFrameworksLoaded);
function doWhenBothFrameworksLoaded() {
// TBD
}
如果要确定首先加载哪个初始页面,请使用此代码
此代码可以防止初始页面初始化,您可以使用它来加载任何其他页面:
$(document).on('pagebeforechange', function(e, data){
var to = data.toPage;
if (typeof to === 'string') {
var u = $.mobile.path.parseUrl(to);
to = u.hash || '#' + u.pathname.substring(1);
if (to === '#second') {
alert('Can not transition the page #second!');
e.preventDefault();
e.stopPropagation();
// remove active status on a button, if transition was triggered with a button
$.mobile.activePage.find('.ui-btn-active').removeClass('ui-btn-active ui-shadow').css({'box-shadow':'0 0 0 #3388CC'});
}
}
});
详细了解here。