页面创建不起作用答案

【问题标题】：pagecreate is not working页面创建不起作用
【发布时间】：2014-07-22 05:14:24
【问题描述】：

每当我尝试运行时，都会弹出一个错误 "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
        });
    }

【问题讨论】：

标签： javascript jquery events jquery-mobile cordova

【解决方案1】：

发生了什么

你做错了。

不应在 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。

【讨论】：

嗨@Raunak，如果这个或任何答案解决了您的问题，请点击复选标记考虑accepting it。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。如果您还有其他问题未在此问题中直接提出，您应该打开另一个问题。