如何使用Bootstrap星級評分來克隆元素

Question

我正在使用this庫在我的網站上評分。我遇到的問題是在點擊按鈕克隆#skill 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> 

一個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