stellar.js无法通过AJAX处理动态加载的元素

Question

I'm using the fantastic Stellar.js ( http://markdalgleish.com/projects/stellar.js/ ) for parallax on a recent project, but I've run into a challenge:

Stellar isn't noticing when I change content via AJAX (in this case loading in new div's from an html file and using jQuery's replaceWith method). So, my new elements have no parallax, even though they have stellar data attributes.

I've tried calling the .stellar function on my window again after the AJAX is complete, but it doesn't do anything.

How can I get Stellar to correctly apply parallax to the new AJAX'd in elements?

Answer 1

I know this question was posted a long time ago has been accepted, but for me the solution above did not work, so I just wanted to share this which worked for me.

After you AJAX call has been successful you can call Stellar's refresh function like so:

$.stellar('refresh');

Here is the full code:

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

    $(targetElement).html(data);

    $.stellar('refresh');

}).fail(function() {

    // Do something else

});

Answer 2

I found that I can run this code in my jQuery AJAX callback and Stellar will then correctly apply parallax to my new AJAX'd in elements:

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

Answer 3

I know that the topic is old but I want to share the solution that I found, hoping that it will be useful for people who are still searching. First create the function:

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

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

Second insert this line in your Ajax call:

// Reinitialise plugins:
    init();