Twitter Bootstrap - JSの追加後にselectpickerが反応しない

Question

ブートストラップアドオンに問題がありますselect picker。私はJSで動的に追加しています。追加してもアクティブにならないでしょう。それらはただそこにあります。クリックすることはできますが、オプションを選択することはできません。ここに簡略化したコード（またはここにはLIVE DEMO）があります。

<script> 
$(function() { 
    $("#add").click(function() { 
     $(".pattern").clone().removeClass("hidden pattern").addClass("col-md-24 added").prependTo("#next-line"); 
    }); 

    $(".remove").click(function() { 
     console.log("remove"); 
     $(this).parent('.added').remove(); 
    }); 
    $('.selectpicker').selectpicker(); 

    }); 
</script> 
<!-- .... --> 
<button type="button" id="add" class="btn btn-success"><span class="fa fa-plus"></span></button> 
<form method="POST"> 
     <select class="selectpicker" name="id[]" data-live-search="true"> 
      <!-- .... --> 
     </select> 

    <div id="next-line"> 
    </div> 
    <button type="submit" name="save" class="btn btn-lg btn-success"><span class="fa fa-lg fa-send"></span> Send</button> 
</form> 

<div class="pattern hidden"> 
    <select class="selectpicker" name="id[]" data-live-search="true"> 
     <!-- .... --> 
    </select> 
</div> 

ありがとうございました。

Answer 1

すでに要素がすでにselectpickerにクローン化されています。

隠しセレクトはクローンを作成するパターンなので、selectpickerクラスを削除することをお勧めします。

次に、クローンを作成できます。
しかし、プリペンドする前に、それにselectpickerを開始するのに便利なユニークなIDを付けてください。

$("#add").click(function() { 
    var myClone = $(".pattern").clone().removeClass("hidden pattern").addClass("col-md-24 added"); 
    var nb = $(".added").length+1; 

    myClone.attr("id", "added_"+nb).prependTo("#next-line"); 
    $("#next-line").find('#added_'+nb).find("select").selectpicker(); //load again 
}); 

こうして、新しく追加された要素でのみ選択ピッカーが開始されます。
;）

これはCodePenで動作しています。