代码之家 › 专栏 › 技术社区 › user4851087

如何使用Bootstrap星级来克隆元素

rating twitter-bootstrap css jquery javascript

3

user4851087 · 技术社区 · 10 年前

我正在使用 this 图书馆在我的网站上评分。我遇到的问题是,在我单击按钮克隆#skilldiv中的所有元素后,我无法单击该元素进行评级。我知道我需要在克隆后重新初始化插件。但我被困在这里。我有一个这样的潜水器

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

1 回复 | 直到 10 年前

1

0

BenG 10 年前

您的问题是,当插件已经在输入上运行时,您正在克隆容器,这会在输入周围创建大量包装等。

您需要克隆 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