Twitter Bootstrap - selectpicker не реагирует после добавления их по JS

Question

У меня есть проблема с надстройкой bootstrap 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 на нем.

$("#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 
}); 

Таким образом, вы обязательно инициируете selectpicker только для вновь добавленного элемента.
;)

Он работает в этом CodePen.