Jquery Mobile - 页面加载时禁用对话框？答案

【问题标题】：Jquery Mobile - disabled dialog on page load?Jquery Mobile - 页面加载时禁用对话框？
【发布时间】：2013-04-08 00:23:36
【问题描述】：

我的应用程序中有一个初始初始化页面，它充当入口点并加载我的登录页面。

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-      1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>  
</head> 
<body>

<!-- initialse and load the application -->
<div data-role="page" id="init">

  <script type="text/javascript">   
    $('#init').live( 'pageinit', function() {
      window.location.href="views/login.html";
    });
  </script>

</div>

</body> 
</html>

当我的登录页面加载时，有一个按钮会加载一个对话框。此按钮最初不起作用，仅在手动刷新页面时加载对话框。为什么会发生这种情况以及如何在页面加载后立即启用按钮/对话框。

<!DOCTYPE html> 
<html> 
<head> 
  <title></title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>    
</head> 
<body>

<!-- login page -->
<div data-role="page" id="login">

<!-- css -->
  <link rel="stylesheet" href="../css/global.css" />
  <link rel="stylesheet" href="../css/login.css" /> 
<!-- page markup -->    
  <div data-role="header">
    <a href="#settings_dialog" data-rel="dialog" data-role="button" data-mini="true" data-inline="true" data-icon="gear" data-theme="b">Settings</a>
  </div>

</div>
<!-- end of page -->


<!-- settings dialog page -->
<div data-role="dialog" id="settings_dialog">

<!-- page markup -->
  <div data-role="header" style="text-align: left;">
    <a href="" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" data-iconpos="left" data-inline="true"></a>
  </div>

  <div data-role="content">

  </div>

</div>
<!-- end of page -->

</body>
</html>

【问题讨论】：

标签： javascript jquery html mobile

【解决方案1】：

不确定您是否已解决此问题，但它似乎与 DOM 缓存和 AJAX 有关。

我不确定你会怎么做，但是当你重新加载窗口时尝试设置ajax: false。或者，您可以通过服务器端重定向（我建议这样做，因为如果用户关闭了 JS，它仍然可以工作。

我之所以知道这一点是因为我有一个带有列表的页面，列表项将我发送到一个新页面，该页面上有一个跳转链接 (#settings_dialog)。在每个列表项上设置data-ajax="false" 以某种方式“刷新”了 DOM 并强制第二页加载“新鲜”，瞧——我的对话框现在 100% 工作。

所以，简而言之，关闭 AJAX 功能或（更好）从服务器端重定向并开心！

【讨论】：