爲什麼本頁上的表單只能工作一次？

Here's the Form in Question 爲什麼本頁上的表單只能工作一次？

我是jQuery Mobile的新手，所以我懷疑這個問題與JS jQuery Mobile運行有關。

該表格似乎表現出預期的第一次通過。隨後的提交文件似乎什麼也沒有做，而且每次提交之後也有一些輕微的惱人的動畫。

編輯：您可以輸入「測試」的示例查詢。

<html> 
    <head> 
     <meta charset="utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1" /> 
     <title>Phone Price Look-up</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
     <style> 
      /* App custom styles */ 
     </style> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> 
     </script> 
     <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"> 
     </script> 
    </head> 
    <body> 
     <div data-role="page" id="page1"> 
      <div data-theme="a" data-role="header"> 
       <h3> 
        Price Finder 
       </h3> 
      </div> 
      <div data-role="content"> 
       <div id="search-form-container"> 
        <form name="search-form"> 
         <div data-role="fieldcontain"> 
          <fieldset data-role="controlgroup"> 
           <label for="search_term"> 
            Enter Model Number: 
           </label> 
           <input id="search_term" placeholder="" value="" type="text" /> 
          </fieldset> 
         </div> 
         <input id="search-form-submit" type="submit" data-theme="b" value="Submit" /> 
        </form> 
       </div> 
      </div> 
      <div data-theme="a" data-role="footer"> 
       <h2> 
        www.thephonerecyclers.com 
       </h2> 
      </div> 
     </div> 
     <script> 
      $(document).ready(function() { 
       $.mobile.ajaxLinksEnabled = false; // don't really know what this does. 
       $('#search-form-submit').click(function() { 
        var searchTerm = $('#search_term').val(); 
        $.ajax({ 
         type: 'POST', 
         url: 'ajax/search.php', 
         data: {search_term: searchTerm}, 
         success: function(response) { 
          response = JSON.parse(response); 
          if (!response.success) { 
           alert('no phone found'); 
          } else { 
           var phoneInfo = JSON.parse(response.response); 
           alert(phoneInfo[0].manufacturer + ' ' + phoneInfo[0].name + ' (' + phoneInfo[0].model_no + ')' + '\n$' + phoneInfo[0].price); 
          } 
         }, 
         error: function() { 
          //handle error 
          alert('error doing ajax, mate'); 
         } 
        }); 
       }); 
      }); 
     </script> 
    </body> 
</html>

來源

2012-03-27 eysikal

在這裏發佈您的代碼。我不點擊問題中的鏈接。 – 2012-03-27 17:54:35

即使是第一次，它也不適合我。我正在使用Chrome。 – 2012-03-27 17:54:59

什麼不起作用？每次行爲看起來都一樣。 FireBug每次都會顯示請求和響應。 – David 2012-03-27 17:55:20

由於多JQuery的移動的利用散列路由導航和動態創建的內容，正常事件處理程序可能是不夠的。在您的示例中，您將表單發佈到新的哈希路由並重新構建頁面而無需重新加載。新創建的對象不包含在您之前定義的任何事件處理程序中。

而是因爲你沒有定義的點擊處理程序：

$('#search-form-submit').click(function() {

你應該利用「上」功能的jQuery的。因爲你是其中的jQuery的舊版本，使用「實時」功能，提供類似的目的是這樣的：

$('#search-form-submit').live("click", function(){

通過結合這樣的情況下，任何動態創建的內容還應處理程序包括。

來源

2012-03-27 20:10:13 r0m4n

我剛纔懷疑我是否回來檢查新的答案，不管是否第二次附加處理程序。你證實了我的懷疑並提供了一個工作解決方案。謝謝。我唯一想知道的是，最好是使用'live（'click'，...）'還是創建一個JS函數來包裝所需的AJAX功能並將它附加到HTML本身的按鈕中：'' – eysikal 2012-03-27 20:55:45

我更喜歡處理程序而不是內聯代碼，但就我的最佳實踐而言不太確定。 – r0m4n 2012-03-27 21:09:31

你在你的Ajax成功功能警報中有語法錯誤，我想這是從工作保持它：

您有：

alert(phoneInfo[0].manufacturer +' '+ phoneInfo[0].name +(+ +phoneInfo[0].model_no+ +)+ +'\n$'+ phoneInfo[0].price);

應該是：

alert(phoneInfo[0].manufacturer +' '+ phoneInfo[0].name +'('+phoneInfo[0].model_no+')\n$'+ phoneInfo[0].price);

來源

2012-03-27 17:58:33 JKirchartz

哎呀，我只是在我發佈我的問題之前添加了這些括號。它現在已經修復，但沒有解決我發佈的問題。 – eysikal 2012-03-27 19:03:58

修復此行中的語法錯誤：

alert(phoneInfo[0].manufacturer +' '+ phoneInfo[0].name +(+ +phoneInfo[0].model_no+ +)+ +'\n$'+ phoneInfo[0].price);

例如爲：

alert(phoneInfo[0].manufacturer+' '+phoneInfo[0].name+'('+phoneInfo[0].model_no+')'+'\n$'+phoneInfo[0].price);

來源

2012-03-27 17:59:07 ThiefMaster

哎呀，我只是在發佈我的問題之前添加了這些括號。它現在已經修復，但沒有解決我發佈的問題。 – eysikal 2012-03-27 19:03:04

爲什麼本頁上的表單只能工作一次？

回答

相關問題