如何使用Bootstrap星级评分克隆元素

Question

如何使用Bootstrap星级评分克隆元素

javascriptjquerycsstwitter-bootstraprating

3

我正在使用这个库来在我的网站上打分。问题是，在我点击按钮克隆#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的 clone 方法

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

- user4851087

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BenG · 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'
    });
});

代码片段