Question

我开发了一个登录页面。当用户按下登录按钮时，我会显示“Loader spinner”并显示第二页。但是当用户在第二页中按下后退按钮时，Loader仍然在第一页中可见。我无法掩饰它。我该如何解决这个问题？有没有更简单的方法来使用AJAX？我的代码：第一页

enter code here
<!DOCTYPE html>
 <html>
<head>
 <title>Forms with jQM</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

<script>
 $(document).on("pagebeforehide","#plogin", function(event, ui) {
 $.mobile.loading('hide');
 });
</script>

 </head>
 <body>

 <div data-role="page" id="plogin">
 <div data-role="header"><h1>Forms with jQM</h1></div>
 <div data-role="content">
 <form id="login" name="login" action="http://www.vyingbrain.net/testajax.aspx" method="POST" class="hide-page-loading-msg">
 <div data-role="fieldcontain">
 <label for="username">Username: </label>
 <input type="text" name="usr" id="usrn" value="" /><br />
 </div>

 <div data-role="fieldcontain">
 <label for="password">Password:</label>
 <input type="password" name="pss" id="pass" value="" /><br />
 </div>

 <input type="hidden" name="hiddenInput" id="hiddenInput" value="secret message" />
 <input type="submit" name="loginSubmit" id="loginSubmit" value="Login" class="show-page-loading-msg" />
 </form>
</div>
</div>
<script>
 $(document).on("click", ".show-page-loading-msg", function() {
 var $this = $( this ),
 theme = $this.jqmData("theme") || $.mobile.loader.prototype.options.theme,
 msgText = $this.jqmData("msgtext") || $.mobile.loader.prototype.options.text,
 textVisible = $this.jqmData("textvisible") || $.mobile.loader.prototype.options.textVisible,
 textonly = !!$this.jqmData("textonly");
 html = $this.jqmData("html") || "";
 $.mobile.loading( 'show', {
 text: msgText,
 textVisible: textVisible,
 theme: theme,
 textonly: textonly,
 html: html
 });
 })
 .on("click", ".hide-page-loading-msg", function() {
 $.mobile.loading( 'hide' );
 });
 </script>
</body>
</html>

第二页：testajax.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="TestAjax.aspx.vb" Inherits="TestAjax" %>

<!DOCTYPE html">

<html>
<head runat="server">
 <title>JQuery Test</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

</head>
<body>
<div data-role="page">
<div data-role="header"><h1>TestAjax</h1></div>
<div data-role="content">
<a href="login.htm" data-rel="back" data-role="button">Go Back</a>
 <form id="form1" runat="server">
 <div>
 <asp:Label ID="lblDet" runat="server" Text="Label"></asp:Label>
 </div>
 </form>
</div>
</div>

</body>
</html>

Answer 1

尝试将此添加到您的脚本

    window.onload = window.onpageshow = function () {
        $.mobile.loading('hide');
    };

Answer 2

试试这个......

$( document ).on( "pagechange", function() {
     $.mobile.loading('hide');
});

隐藏页面加载器微调器

2 个答案: