Динамически добавлять элементы в слайд-шоу JQuery

Question

Я пытаюсь добавить элементы в слайд-шоу jquery ( слайды ), но не могу найти способ его обновить.У меня есть этот HTML-код:

<a class='add' href='#'>add slide</a>

<div id="slides">   
    <div class="slides_container">    
            <h1>Slide 1</h1>       
            <h1>Slide 2</h1>       
            <h1>Slide 3</h1>       
            <h1>Slide 4</h1>       
            <h1>Slide 5</h1>       
   </div>
</div>

и это JS:

$(function() {
    $("#slides").slides();

    $('.add').live('click', (function() {
        $('.slides_control').append('<h1>Slide added</h1>');
        // note: slides_control div is added by the slides plugin automatically and is the real container of the items.
        return false;
    }));

});

Демо-версия находится в Fiddle

Мне нужно перезагрузитьСлайд-шоу, чтобы показать новые данные, но я не могу найти способ сделать это.

Answer 1

Самая новая версия Slides ( см. Github ) на самом деле имеет функцию slides('update'), но в текущей версии ее пока нет.

Тем временем вы можетеиспользуйте этот маленький хак:

$("#slides").slides();

$('.add').on('click', function() {
    var children = $('#slides .slides_control').children();
    var newContainer = $('<div class="slides_container" />');
    var slides = $('#slides');

    slides.empty().append(newContainer);
    newContainer.append(children);
    newContainer.append('<div><h1>New slide</h1></div>');

    slides.slides();

    return false;
});

Вы можете поиграть с ним здесь: http://jsfiddle.net/R7zvM/

Обратите внимание, что вам, вероятно, следует провести некоторое тестирование, прежде чем использовать это в рабочем коде.Это кажется довольно стабильным, но ваш пробег может отличаться.

PS .live () устарел с jQuery 1.7.В этом примере вам, в любом случае, не нужно делегировать события, но если вы когда-нибудь это сделаете, вы должны использовать новый синтаксис:

$(document).on('click', 'a.add', function() {
    console.log('Do something');
});

Answer 2

Попробуйте $("#slides").slides("update");