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

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

Try изменения

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

в

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

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

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

Answer 2

Используйте событие делегация:

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

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

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

Answer 3

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

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