Как клонировать элемент, используя стартовый рейтинг Bootstrap

Question

Я использую библиотеку this для оценки на моем сайте. Проблема у меня есть после того, как я нажму кнопку, чтобы клонировать все элементы в #skill div, я не могу нажать на этот элемент, чтобы оценить. Я знаю, что мне нужно повторно инициализировать плагин после клонирования. Но я застрял в этом. У меня есть DIV как этого

<div class="sectionContent" id="skill"> 
    <article class="skill"> 
     <span contenteditable>-PHP</span> 
     <input class="rating" data-show-clear="false" data-show-caption="true" data-size="xs" data-show-caption="true" data-step="1"> 
    </article> 
</div> 

И JQuery с использованием клона

$('#btnAddSkill').click(function() { 
    $('.skill:first').clone().appendTo("#skill"); 
    $(".rating:last").rating({ 
     starCaptions: {1: "Kém", 2: "Yếu", 3: "Trung Bình", 4: "Khá", 5: "Tốt"}, 
     starCaptionClasses: {1: "text-danger", 2: "text-warning", 3: "text-info", 4: "text-primary", 5: "text-success"}, 
     size:'xs' 
    }); 
}); 

Answer 1

Вашей проблемой клонированием контейнера, когда плагин уже побежал на входе, который создает много оберток и т.д. вокруг ввода.

необходимо клонировать input, а затем обернуть его так же, как и исходный html, а затем вызвать .rating.

$('#btnAddSkill').click(function() { 
    var article = $('<article />', {class:"skill"}).append('<span contenteditable="">-PHP</span>'); 
    $('.rating:first').clone().appendTo("#skill").wrap(article); 
    $(".rating:last").rating({ 
     starCaptions: {1: "Kém", 2: "Yếu", 3: "Trung Bình", 4: "Khá", 5: "Tốt"}, 
     starCaptionClasses: {1: "text-danger", 2: "text-warning", 3: "text-info", 4: "text-primary", 5: "text-success"}, 
     size:'xs' 
    }); 
}); 

Fiddle