Почему форма на этой странице работает только один раз?

Here's the Form in Question Почему форма на этой странице работает только один раз?

Я новичок в jQuery Mobile, поэтому я подозреваю, что эта проблема имеет какое-то отношение к работам JS jQuery Mobile.

Форма, кажется, ведет себя так, как ожидалось, в первый раз. Последующие представления, похоже, ничего не делают ... и после каждого представления есть также слегка раздражающая анимация.

EDIT: Вы можете ввести «тест» для примерного запроса.

<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

Отправьте свой код здесь. Я не нажимаю ссылки на вопросы. –

Это не сработало для меня даже в первый раз. Я использую Chrome. –

Что не работает? Поведение выглядит идентично мне каждый раз. И FireBug каждый раз показывает запрос и ответ. – David

Поскольку большая часть 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

Я предпочитаю обработчики по встроенному коду, но насколько мне лучше всего подходит не слишком уверен. – r0m4n

Ваше предупреждение в вашем АЯКСЕ функции успеха имеет синтаксические ошибки, я думаю, что это то, что держит его от работы:

у вас есть:

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

Исправить ошибки синтаксиса в этой строке:

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

Почему форма на этой странице работает только один раз?

ответ

Смежные вопросы