gpt4 book ai didi

JQuery Mobile pageShow 和 pageCreate 事件未触发

转载 作者:行者123 更新时间:2023-12-01 02:44:17 27 4
gpt4 key购买 nike

我有一个 JQuery Mobile 应用程序。在应用程序的第一页上,我尝试在加载时设置一些字段值(如果之前已设置)。为了尝试做到这一点,我目前有以下内容:

索引.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">

<link rel="stylesheet" href="/resources/css/themes/mobile/core.css" />
<link rel="stylesheet" href="/resources/css/themes/mobile/app.css" />

<script type="text/javascript" src="/resources/scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/resources/scripts/app.ui-1.0.js"></script>
<script type="text/javascript" src="/resources/scripts/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div id="loginPage" data-role="page">
<div data-role="header" data-position="fixed"><h1>AppName</h1></div>
<div data-role="content">
<label for="usernameTextBox">Username</label>
<input id="usernameTextBox" type="text" autocomplete="false" /><br />

<label for="passwordTextBox">Password</label>
<input id="passwordTextBox" type="password" /><br />

<div class="ui-grid-a"><div class="ui-block-a">
<a href="#" id="loginButton" data-role="button" class="dd-btn-a" onclick="return loginButton_Click();">Login</a></div>
</div>
</div>
</div>
</body>
</html>

app.ui.js

$("#loginPage").on("pagecreate", function () {
alert("here 1");
$.mobile.hidePageLoadingMsg();
});

$("#loginPage").on("pageshow", function () {
alert("here 2");
$.mobile.hidePageLoadingMsg();

var us = false;
var ps = false;

var u = window.localStorage.getItem("username");
if ((u != null) && (u != undefined) && (u.length > 0)) {
if (u != "undefined") {
$("#usernameTextBox").val(u);
us = true;
}
}
alert(u);

var p = window.localStorage.getItem("password");
if ((p != null) && (p != undefined) && (p.length > 0)) {
if (p != "undefined") {
$("#passwordTextBox").val(p);
ps = true;
}
}

if ((us == true) && (ps == true)) {
loginButton_Click();
}
});

奇怪的是,我的“警报”框都没有被触发。此外,我在控制台窗口中没有看到任何错误。我做错了什么?

最佳答案

导入您的app.ui-1.0.js之前</body>结束正文标签。然后就可以了。原因是你的 js 文件将在加载 DOM 和 jQuery 文件之前执行。所以它不会火。

始终确保按以下顺序导入

  1. jQuery 框架
  2. jQuery Mobile 框架
  3. jquery 插件
  4. 您的自定义 js 文件

正如 Gajotres 提到的,将代码包装在以下代码片段中是一种很好的做法。

$(document).on("pagecreate", "#loginPage", function () { 
// your code here
});

如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">

<link rel="stylesheet" href="/resources/css/themes/mobile/core.css" />
<link rel="stylesheet" href="/resources/css/themes/mobile/app.css" />

<script type="text/javascript" src="/resources/scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/resources/scripts/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div id="loginPage" data-role="page">
<div data-role="header" data-position="fixed"><h1>AppName</h1></div>
<div data-role="content">
<label for="usernameTextBox">Username</label>
<input id="usernameTextBox" type="text" autocomplete="false" /><br />

<label for="passwordTextBox">Password</label>
<input id="passwordTextBox" type="password" /><br />

<div class="ui-grid-a"><div class="ui-block-a">
<a href="#" id="loginButton" data-role="button" class="dd-btn-a" onclick="return loginButton_Click();">Login</a></div>
</div>
</div>
</div>
<script type="text/javascript" src="/resources/scripts/app.ui-1.0.js"></script>
</body>
</html>

关于JQuery Mobile pageShow 和 pageCreate 事件未触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15681335/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com