jqueryスライドショーに項目を動的に追加します

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

を試してみてください。あなたがここにそれで遊ぶことができます

$("#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..live()メソッドはjQuery 1.7以降では非推奨です。この例では、とにかく、イベントの委任を必要とするdid't、しかし、あなたは今まであなたが新しい構文を使用する必要があります場合：

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

Answer 2

は、スライド（see Github）の最新バージョンは、実際に機能slides('update')を持っていますが、現在のバージョンはまだそれを持っていない$("#slides").slides("update");