JQuery. Не замечая новых элементов, которые добавляются после загрузки

Question

У меня есть следующий код jQuery, который следит за запросом ajax, а затем показывает/скрывает изображение прядильщика, когда запрос начинается/заканчивается.

Это прекрасно работает при загрузке страницы. Однако, если я обновляю часть страницы с новой ссылкой ajax, этот код больше не ловит ajax:before. Кто-нибудь знает, есть ли решение для этого без необходимости вызова unbind(), а затем снова вызвать код?

$("*[data-spinner]").on('ajax:before', function(e) { 
    $('#' + $(e.target).data('spinner')).show(); 
}); 

$("*[data-spinner]").on('ajax:complete', function(e) { 
    $('#' + $(e.target).data('spinner')).hide(); 
}); 

Answer 1

$(document).on('ajax:before', '*[data-spinner]', function(e) { 
    $('#' + $(e.target).data('spinner')).show(); 
}); 

Это связано с тем, что jQuery связывает свои функции с DOM на pageload. Если вы попытаетесь связать свой «счетчик данных», который еще не существует, jQuery не найдет его и не свяжет его.

Однако, если вы привязываетесь к документу, его можно найти, и мы передаем ваш '* [data-spinner]' в качестве второго параметра с момента его просто фильтра. jQuery будет смотреть его только тогда, когда вы нажимаете что-то внутри «документа», поэтому оно всегда будет актуальным.

Answer 2

ли вы пытались как

$("body").on("'ajax:before", "*[data-spinner]", function(){ 
$('#' + $(e.target).data('spinner')).show(); 
}); 

$("body").on('ajax:complete', "*[data-spinner]", function(e) { 
    $('#' + $(e.target).data('spinner')).hide(); 
}); 

Answer 3

Это должно быть что-то вроде

$(document).on("ajax:before", "*[data-spinner]", function(){ 
    //... 
}); 

Или вы можете использовать родительский элемент вместо документа, и это лучше/быстрее, т.е.

$('#parent_element').on("ajax:before", "*[data-spinner]", function(){ 
    //... 
}); 

Прототип

.on(events [, selector ] [, data ], handler(eventObject)) 

Подробнее о jQuery website.