頁越來越扭曲，如果我使用jQuery Mobile的提交表單

Question

我有這樣

<div data-role="page" id="callAjaxPage">  
    <div data-role="header"> 
     <h1>Login</h1> 
    </div> 

    <div data-role="content"> 
     <form id="callAjaxForm"> 
      <div data-role="fieldcontain"> 
       <label for="userName">Username</label> 
       <input type="text" name="userName" id="userName" value="" /> 

       <label for="password">Password</label> 
       <input type="text" name="password" id="password" value="" /> 

       <button data-theme="b" id="submit" type="submit">Submit</button> 
      </div> 
     </form> 
    </div> 
</div> 

和$（文件）。就緒（）的代碼是

$(document).ready(function() { 
    $("#submit").click(function(){ 

    alert("Hi"); 
    }); 
}); 

然後一個形式，它第一次工作。但是第二次我的屏幕變形了。

如果我把<form id="callAjaxForm" data-ajax="false">那就好一點了。 但仍然如果我按提交它顯示我alert.And我必須等待很長時間的第二次警報。

爲什麼會發生這種情況？

Answer 1

您正在使用的行爲對於jQuery移動版是正確的。

在jQuery手機中，有一個保持用戶在同一頁面上並且嚴重依賴ajax調用的概念。這是爲了防止重新加載整個頁面，並不得不再次獲取所有資源。閱讀此頁，特別是標記約定部分http://jquerymobile.com/test/docs/forms/docs-forms.html。

既然我們已經掌握了關於jQuery移動如何工作的一些背景知識，那麼我們可以針對您的問題採取措施。

之所以沒有第二次提示信息時，你不把data-ajax="false"在你的形式很簡單，因爲你點擊#submit按鈕首次後看到形式是不一樣的形式。它看起來是一樣的，它有相同的標記，但這是因爲jQuery Mobile將表單提交到您所在的相同地址並顯示結果。您在頁面加載時附加的Click事件處理程序在當時是有效的（這意味着它仍然可以工作，但對於之前的隱藏按鈕），因此您無法看到警報消息。工作示例：http://jsfiddle.net/c4uy7/5/show/注意到頁面轉換，清楚地顯示了您的初始表單如何隱藏（也請注意瀏覽器地址欄 - 它保持不變）。

這就是第一種情況。將data-ajax="false"添加到表單後的行爲導致jQuery mobile以常規方式提交表單，因此實際上每次都會重新加載頁面，並且點擊處理函數按鈕爲#submit。您提到的漫長等待時間可能是由於網絡延遲，服務器端處理速度緩慢或類似原因造成的。以下是示例http://jsfiddle.net/c4uy7/4/show/ - 點擊提交每次都會顯示警報（通過查看地址欄中的參數可以看到頁面重新加載）。