Reload Flexslider

问题:

I am using the flexslider plugin which is triggered by the following code:

 $(window).on('load', function () {
    $('.flexslider').flexslider();
  });

This runs once the page has loaded. Later in the application I've replaced the contents of the flexslider (the number of images in it and their sources) and need to re-load the flexslider.

My code is as follows:

document.getElementById('contestant1').onclick = function() {
    process();  
}   

output = "";
for (num=1; num<=3; num++) {
    imagesource = "Week" + num + "/Antony.png";
    output = output + "<li> <img src=" + imagesource + " /> </li>";
}
document.getElementById('images').innerHTML = output;
console.log(output);
$('.flexslider').flexslider();

Please tell me how to force the flexslider to re-load. Here is a link to the full application, however it has a few more complex elements not relevant to the problem:

http://eg-graphics.com/zwooper/EGVGV/Season2/MemoryWall.html

回答1:

Figured out a fix:

Added the line: $('#flexslider').removeData("flexslider");

before this one: $('.flexslider').flexslider();

Runs like a dream

回答2:

You can revmove the older flexslide and reinit it.

output = "";

for (num=1; num<=3; num++) {
    imagesource = "Week" + num + "/Antony.png";
    output = output + "<li> <img src=" + imagesource + " /> </li>";
}

var images = $("#images").append(output);
console.log(output);
$(".flexslider").remove();
$(".Your-flexslider-container").append("<div class='flexslider'></div>");
$(".flexslider").html(images);
$('.flexslider').flexslider();

Is it an example because i dont now how is your html flexslider .Try to make this code work for you.