Функции jquery не работают должным образом после перезагрузки .html

Question

У меня есть страница со списком элементов, изначально загруженных из строки include_once('show_calendarV2.php');.

Рядом с каждым элементом находится значок удаления, который запускает следующий jquery для удаления элемента из БД и последующего обновления страницы.

$('.delete_schedule_item').click( function() {
     var id = $(this).next('input[type=hidden]').attr('value');
     alert ( id );

     $.ajax({
          url: 'ajax/delete_schedule_item.php',
          type: 'post',
          data: { id: id },
          dataType: 'json', // get back status of request in JSON
          success: function(data) 
          {
              //alert( 'item deleted' );
          }
         //           if (data.status) {
         //            alert('success');
         //          }
         //          else {
         //             alert('error');
         //         },
         //... other parameters/callbacks ...
         });

     $.get('show_calendarV2.php', {},      
        function(data) 
        {
        //load the calendar data
        $("#calendar").html( data );

       });
    });

Все отлично работает при первом удалении элемента. Элемент удален. Новая страница загружается.

а после загрузки страницы кнопки удаления? JQuery звонки? больше не работает.

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

Идеи

Answer 1

Попробуйте изменить

$('.delete_schedule_item').click(function() {

до

$('.delete_schedule_item').live("click", function() {

Если вы загрузите кучу новых html, функция, которую вы запускали раньше, больше не будет к ней применима. И так как вы загружаете его через Ajax, функция не выполняется снова, как только она закончила загрузку.

Красота функций live() и die() в jquery заключается в том, что они заботятся об этой ситуации. Всякий раз, когда загружается что-то новое, соответствующее селектору, новые элементы обновляются автоматически.

Answer 2

Причина, по которой он больше не работает, заключается в том, что обработчики событий добавляются в сами элементы DOM. Когда вы загружаете новый HTML через AJAX, старые элементы с прикрепленными обработчиками событий удаляются, а на их место подставляются новые элементы без обработчиков. Есть два возможных решения: во-первых, вы можете повторно применить обработчики к недавно загруженному HTML. Просто перезапустите код, который устанавливает обработчик событий в загруженном HTML. Другой вариант, который вы можете использовать в этом случае, потому что событие click обрабатывается live, заключается в использовании live обработчиков событий, как предлагают @womp и @ karim79.

Обратите внимание, что с действующими обработчиками есть некоторые ограничения - они не применяются ко всем типам событий (щелчок работает) и они не работают должным образом с распространением (то есть остановка распространения не работает). См. Документацию jQuery для live для получения дополнительной информации.

Answer 3

Использовать делегирование события:

$('.delete_schedule_item').live("click", function() {...

Делегирование событий с использованием live автоматически повторно присоединит обработчики событий к новым внедренным элементам. Когда вы заменяете раздел вашей веб-страницы свежим контентом через ajax, любые обработчики событий, связанные со «старыми» элементами, не будут автоматически присоединяться к вновь внедренным элементам, если вы не используете делегирование события (или повторно подключаете обработчик события в обратном вызове вашего метода ajax).

Чтобы делегирование событий с live работало, вам необходимо использовать jQuery 1.3 или выше.