如何使用引导星评级克隆元素
How to clone element using Bootstrap star rating
我正在使用这个库在我的网站上评分。我遇到的问题是,在我单击按钮克隆div 中的所有元素后 #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>
并使用克隆进行 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'
});
});
您的问题是当插件已经在输入上运行时,您正在克隆容器,这会在输入周围创建大量包装器等。
您需要克隆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'
});
});
小提琴
相关文章:
- 当知道同一hiearch中至少有一个元素时,遍历到元素.结构使用jquery
- 在多个元素上使用jquery插件,只需稍作修改
- 元素未使用当前玩家操作进行更新
- 如何检查日期选择器和时间选择器元素是否使用JQuery/Javascript设置
- 如何确定 HTML 元素是使用哪个实例创建的
- jQuery隐藏元素在使用CSS显示时保持隐藏状态
- 如何选择具有类名的元素并使用javascript添加到数组中
- 如何停止“;固定的“;元素,使用以下代码
- 如何在 *ngFor 列表中显示单击的元素,使用 Angular 2 隐藏其他元素
- 每次在动画之后完全删除该元素.- 仅使用 CSS
- JSON 填充的表单元素不使用 angularJs 过滤器进行过滤
- 如何在音频元素上使用React媒体合成事件监听器
- 在具有CONTENT标记的自定义元素中使用SELECT标记时出现问题
- 在内联元素中使用range.expand('word')时,range的boundingClientRe
- 注入SVG元素并使用jquery访问它
- 如何在已创建的元素上使用触发器
- 如何在d3工具提示的html元素中使用Angularjs过滤器
- Protractor:有没有办法在之前定位的元素上使用element.all
- 获得点击的元素's使用Javascript的HTML
- 使用jquery从另一个元素获取使用id的输入的id