Question

我正在尝试将项目添加到jquery幻灯片（slides），但我找不到刷新它的方法。我有这个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

最新版本的幻灯片（see Github）实际上确实有一个函数slides('update')，但当前版本还没有。{/ p>

与此同时，你可以使用这个小黑客：

$("#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/

请注意，在生产代码中使用此功能之前，您应该进行一些测试。它看起来很稳定，但你的里程可能会有所不同。

P.S。自jQuery 1.7起，.live()方法已弃用。在这个例子中，你不需要事件委托，但是如果你这样做，你应该使用新的语法：

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

Answer 2

尝试$("#slides").slides("update");

动态添加项目到jquery幻灯片

2 个答案: