Функции AJAX/jquery работают только один раз за pageload

Question

Я создаю динамический список дел. Список загружается из локальной базы данных и отображается в таблице. В каждом todo есть кнопка отправки, которую вы можете нажать, и todo должен регистрироваться в базе данных как «сделанный». В моем коде это делается через переменную с именем status, в которой выполняется значение 1, а значение 0 отменено.

Моя проблема в том, что вы можете нажать любую кнопку, и все работает хорошо; новый статус отправляется скрипту PHP, который, в свою очередь, изменяет значение статуса в базе данных. Затем веб-страница автоматически обновляет таблицу отображения. Но если вы попробуете еще раз, на любой из других кнопок, это не сработает. Вам нужно будет перезагрузить веб-страницу для любой из других кнопок для работы.

Вот мой Jquery/AJAX код:

 $(document).ready(function() { 
      $('#todo_display_table input[type="submit"]').click(function(evt) { 
       evt.preventDefault(); 

       var todo_id = $(this).val(); 
       //document.write(todo_id);//debug 
       $.when(changeTodoStatusTo(1, todo_id)).then(updateTodoDisplay); 
      }); 
     }); 

     function updateTodoDisplay() { 
      $.post("./daily_todo_display.php", null, replaceTbodyHTML); 
     } 

     function replaceTbodyHTML(data) { 
      $('#todo_display_table tbody').html(data); 
     } 

     function changeTodoStatusTo(newStatus, todo_id) { 
      //Send til phpscript som lagrer ny status i databasen 
      var parameters = { 
       todo_id: todo_id, 
       newStatus: newStatus 
      }; 

      return $.post("./daily_todo_change_todo_status.php", parameters); //, printDebugInfo); 
     } 

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

Я проверил базу данных, и значение статуса только обновляет себя при первой попытке (первый щелчок любой из кнопок), что указывает на то, что проблема заключается в функции click() или в changeTodoStatusTo() функция. Thnx за любую помощь, и не стесняйтесь спрашивать дополнительную информацию =)

Answer 1

Вы воссоздаете кнопки отправки при обновлении? Трудно сказать, не видя всего вашего кода. Вы пробовали это изменить:

$('#todo_display_table input[type="submit"]').click(function(evt) { 

к этому:

$('#todo_display_table input[type="submit"]').live('click', function(evt) { 

увидеть это, если применимо: http://api.jquery.com/live/

Answer 2

Я предполагаю, что вы теряете код click событий при обновлении html() от #todo_display_table. Попробуйте live() вместо этого

$('#todo_display_table input[type="submit"]').live('click', function(evt) { 

Answer 3

Это классический случай кеширования браузера. Я испытал тот же эффект некоторое время назад. Один выход будет ссылаться на все ваши сообщения, как, например:

$.post("./daily_todo_change_todo_status.php?id=" + (count++), parameters); 

В вашем PHP скрипт, просто игнорировать идентификатор компонента. Таким образом, браузер будет генерировать новую строку каждый раз, и он не будет думать, что он звонил на более старую кешированную страницу.

Надеюсь, что это помогло :) Привет!

Answer 4

Похоже, вы столкнулись с некоторыми проблемами, когда браузер кэширует ответ ваших запросов POST. Это распространенная проблема с некоторыми браузерами. Вы должны знать, что содержимое кеша браузера основано на URI, а не на самом деле. Другими словами, строка запроса включена. Один из способов, чтобы избежать кэширования запросов, чтобы использовать несколько иной URI каждый раз:

$.post("./daily_todo_change_todo_status.php?t="+new Date().getTime(), null, callbackFn); 

Добавляя текущую метку времени, вы гарантированно всегда сделать новый запрос на сервер, а не браузер просто потянув кэшированные данные вместо запроса.

Кроме того, во втором запросе POST вы пытаетесь вернуть данные.Эта функция предназначена для возврата ответа и обработки его внутри функции обратного вызова асинхронно, чтобы вы не блокировали выполнение на странице.

Однако, я вижу, у вас есть комментарий, что он предназначен для отладки информации, поэтому, надеюсь, это то, что вы удаляете на производстве.

Answer 5

Вы не должны использовать прямую функцию JQuery:

По JQuery 1.7, метод .live() является устаревшим. Используйте .on() для присоединения обработчиков событий. Пользователи более старых версий jQuery должны использовать .delegate() в предпочтении .live().

Этот метод обеспечивает возможность присоединения делегированных обработчиков событий к элементу документа страницы, что упрощает использование обработчиков событий, когда контент динамически добавляется на страницу. См. Обсуждение прямых и делегированных событий в методе .on() для получения дополнительной информации.

jQuery live documentation

В документации состояний, используйте .он() вместо этого. Он работает так же, как .live() :)

Answer 6

Из кода, который я вижу, обработка событий выглядит просто замечательно. Однако вы, скорее всего, теряете события, когда вызывается replaceTbodyHTML. Вы можете просто попробовать запустить код из onload снова при обновлении. Например,

function addListeners() { 
    $('#todo_display_table input[type="submit"]').click(function(evt) { 
     evt.preventDefault(); 

     var todo_id = $(this).val(); 
     //document.write(todo_id);//debug 
     $.when(changeTodoStatusTo(1, todo_id)).then(updateTodoDisplay); 
    }); 
} 

$(document).ready(addListeners); 

А потом в конце replaceTbodyHTML добавить addListeners();