stellar.js не работает с динамически нагруженных элементов с помощью AJAX

Question

Я использую фантастический Stellar.js (http://markdalgleish.com/projects/stellar.js/) для параллакса на недавнем проекте, но я столкнулся с проблемой:

Stellar не замечая, когда я меняю контент через AJAX (в этом случае загрузка в новый div из html-файла и с использованием метода replaceWith jQuery). Итак, мои новые элементы не имеют параллакса, хотя у них есть атрибуты звездных данных.

Я попытался снова вызвать функцию .stellar в моем окне после завершения AJAX, но ничего не делает.

Как я могу заставить Stellar правильно применять параллакс к новым элементам AJAX'd?

Answer 1

я обнаружил, что я могу запустить этот код в моем JQuery AJAX обратный вызов и Stellar будет правильно применять параллакс к моему новому AJAX'd в элементах:

$(window).data('plugin_stellar').destroy(); 
$(window).data('plugin_stellar').init(); 

Answer 2

Я знаю, этот вопрос был отправлен давно был принят, но для меня решение выше не сработало, поэтому я просто хотел поделиться тем, что сработало для меня.

После вас AJAX вызов был успешным, вы можете вызвать функцию обновления Stellar как так:

$.stellar('refresh'); 

Вот полный код:

$.ajax({ 
    type: 'GET', 
    url: ajaxUrl 
}).done(function(data) { 

    $(targetElement).html(data); 

    $.stellar('refresh'); 

}).fail(function() { 

    // Do something else 

}); 

Answer 3

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

function init() { 
$(window).data('plugin_stellar').refresh(); 
} 

jQuery(document).ready(function() { 
// Initialise the plugin when the DOM is ready to be acted upon 
init(); 
}); 

Второй вставили эту строку в вызове Ajax:

// Reinitialise plugins: 
    init();