how to refresh objects when i modify the HTML in jquery?

Question

I have a page with jQuery content loaded, one of the div will be a slider

$('#slides').slides({
            preload: true,
            preloadImage: 'img/loading.gif',
            play: 6000,
            pause: 2500,
            hoverPause: true,
            slideSpeed: 1000,
            animationStart: function(current){
                $('.caption').animate({
                    bottom:-35
                },100);
            },
            animationComplete: function(current){
                $('.caption').animate({
                    bottom:0
                },200);
            },
            slidesLoaded: function() {
                $('.caption').animate({
                    bottom:0
                },200);
            }
        });
    });

now, the html is structured like this:

<div id"content">
   <div id="slider"></div>
</div>

I've got my page setup using jquery, when a user clicks on a link, it will load that page's content to the #content

var homepage = $("#content").html();
$("#content").load("myContent.html");

If the user goes back to home, simply :

$("#content").html(homepage);

but then the $('#slides').slides(); doesn't work anymore.

how do I fix this?

SlidesJS

Answer 1

You could use the complete from .load() to check if your content has a #slider in it. If it does, initialize your slides plugin again.

var homepage = $('#content'),
options = {
    generateNextPrev: true,
    play: 1000
};
$('#slides').slides(options);

// Button click or something
$('#content').load('myContent.html', function(response, status, xhr) {
   if ($(response).find('#slider').length > 0) {
       $('#slides').slides(options);
   }
});

EDIT:

I was making a jsfiddle to demonstrate it, but jsfiddle is having server problems, so I made a codepen demo. http://codepen.io/Vestride/pen/LicKd. Calling the plugin again worked for me (although I was simulating ajax requests by just replacing the content with .html()).

Answer 2

Try this,

Put slider in a function,

function SliderCode()
{

$('#slides').slides({
            preload: true,
            preloadImage: 'img/loading.gif',
            play: 6000,
            pause: 2500,
            hoverPause: true,
            slideSpeed: 1000,
            animationStart: function(current){
                $('.caption').animate({
                    bottom:-35
                },100);
            },
            animationComplete: function(current){
                $('.caption').animate({
                    bottom:0
                },200);
            },
            slidesLoaded: function() {
                $('.caption').animate({
                    bottom:0
                },200);
            }
        });
    });
}

After setting hompage callslider function again,

$("#content").html(homepage);
SliderCode();

I didnot tested the code. hope it will work.