jquery не освежает страницу

Question

$('.harvest-sch-grade-delete').click(function(){ 
    jQuery.ajax({ 
     url: "/smartfarm/control/deleteHarvestSchedule", 
     type: "POST", 
     data: {harvestScheduleId:$(this).attr("data")}, 
     success: function(data) { 
      jQuery.ajax({ 
       url: "/smartfarm/control/ajaxHarvestScheduleList", 
       type: "POST", 
       data: {cropId:$('.harvest-sch-grade-delete').attr("val")}, 
       success: function(data) { 
        $('.harvest-schedule-list').html(data); 
        $(".alert-box-sch").html("Harvest Grade Schedule Deleted!!"); 
        $('.alert-box-sch').show(); 
        setTimeout(function() { $(".alert-box-sch").hide(); }, 5000); 
        $('.info-box-sch').hide(); 
        $('.warning-box-sch').hide(); 
        } 
      }); 
     } 
    }); 
}); 

моя функция удаления работает 2 раза после этого, не удаляя ?. И я добавил еще один файл ftl для ajaxification.

Answer 1

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

Как вы обновляете HTML. Вы должны использовать Event Delegation, используя подход .on() делегированных событий.

т.е.

$(document).on('event','selector',callback_function) 

На месте document вы должны использовать ближайший статический контейнер для лучшей производительности.

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

Для вас немедленного использования проблема

$('.harvest-schedule-list').on('click','.harvest-sch-grade-delete', function(){ 
    //Your code 
}); 

вместо

$('.harvest-sch-grade-delete').click(function(){ 
    //Your code 
});