为什么本页上的表单只能工作一次？

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

为什么本页上的表单只能工作一次？

回答

相关问题