jQuery Mobile-页面加载时禁用对话框？

Question

I have an initial init page in my application that acts as an entry point and loads my login page. 我的应用程序中有一个初始的初始化页面，它充当入口点并加载我的登录页面。

<!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>

When my login page loads there is a button which loads a dialog. 当我的登录页面加载时，会有一个按钮加载对话框。 This button initially doesn't work and only loads the dialog when the page is manually refreshed. 此按钮最初不起作用，仅在手动刷新页面时才加载对话框。 Why does this happen and what can I do to enable the button/dialog immediately upon page load. 为什么会发生这种情况，以及如何在页面加载后立即启用按钮/对话框。

<!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>

Answer 1

Not sure if you've fixed this but it seems to be something to do with the DOM cache & AJAX. 不知道您是否已解决此问题，但这似乎与DOM缓存和AJAX有关。

I'm not sure how you'd do it, but try setting the ajax: false when you do the window reload. 我不确定您会怎么做，但是尝试在重新加载窗口时尝试设置ajax: false 。 Alternatively you could redirect via server side (I'd recommend this as it'll still work if the user has JS turned off. 或者，您可以通过服务器端重定向（我建议这样做，因为如果用户关闭了JS，它仍然可以工作。

Why I figured this out was because I had a page with a list on it, the list items sent me to a new page which has a jump link on it (#settings_dialog). 我之所以知道这一点，是因为我的页面上有一个列表，列表项使我进入了一个新页面，该页面上有一个跳转链接（#settings_dialog）。 Setting the data-ajax="false" on each list item somehow 'refreshed' the DOM and forced the second page to load 'fresh' and voila - my dialog works 100% now. 在每个列表项上设置data-ajax="false"以某种方式“刷新” DOM，并强制第二个页面加载“新鲜”和“瞧”-我的对话框现在可以100％工作了。

So, in short, turn off the AJAX feature or (better) redirect from serverside & be happy! 因此，简而言之，请关闭AJAX功能或（最好）从服务器端重定向并感到高兴！

jQuery Mobile-页面加载时禁用对话框？

问题描述

1 个解决方案

解决方案1
0 2013-04-07 16:23:36

jQuery Mobile-页面加载时禁用对话框？

问题描述

1 个解决方案

解决方案1 0 2013-04-07 16:23:36

解决方案1
0 2013-04-07 16:23:36