为什么旋钮拨号/tron css不能与动态html一起工作
为什么旋钮拨号/tron css不能与动态html一起工作
提问于 2018-08-12 07:42:21
我已经在我的网站上实现了Knob jquery plugin。我的包含按钮输入字段的html代码是使用jquery动态生成的。挑战在于文本输入字段没有转换为旋钮拨盘。但是，如果我把按钮html代码直接放入我的php页面，拨盘显示就好了。有人知道为什么动态网页没有显示旋钮刻度盘吗？下面是我的代码：
包括js文件：
<script src="bower_components/jquery-knob/js/jquery.knob.js"></script>旋钮配置功能：
$(function () {
/* jQueryKnob */
$(".knob").knob({
/*change : function (value) {
//console.log("change : " + value);
},
release : function (value) {
console.log("release : " + value);
},
cancel : function () {
console.log("cancel : " + this.value);
},*/
draw: function () {
// "tron" case
if (this.$.data('skin') == 'tron') {
var a = this.angle(this.cv) // Angle
, sa = this.startAngle // Previous start angle
, sat = this.startAngle // Start angle
, ea // Previous end angle
, eat = sat + a // End angle
, r = true;
this.g.lineWidth = this.lineWidth;
this.o.cursor
&& (sat = eat - 0.3)
&& (eat = eat + 0.3);
if (this.o.displayPrevious) {
ea = this.startAngle + this.angle(this.value);
this.o.cursor
&& (sa = ea - 0.3)
&& (ea = ea + 0.3);
this.g.beginPath();
this.g.strokeStyle = this.previousColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
this.g.stroke();
}
this.g.beginPath();
this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
this.g.stroke();
this.g.lineWidth = 2;
this.g.beginPath();
this.g.strokeStyle = this.o.fgColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
this.g.stroke();
return false;
}
}
});
/* END JQUERY KNOB */
});使用jquery创建的动态html：
for (var i in theConfirmedGuests )
{
var evrow = theConfirmedGuests[i];
var confirmed = evrow['confirmed'];
var ev_guests = evrow['totalguests'];
var percentage_tmp = (confirmed/ev_guests)*100;
var percentage = percentage_tmp.toFixed(0);
$('#output_cal_search').append("<div class='col-xs-6 col-md-3 text-center'>
<input type='text' class='knob' value='"+percentage+"' data-skin='tron'
'data-thickness='0.1' data-width='90' data-height='90' data-
fgColor='#00a65a'><div class='knob-label'>data-thickness='0.1'</div>
</div>");最后是html代码：
<table class="table table-hover">
<thead>
<tr>
<th> </th>
<th>ID</th>
<th>Customer</th>
<th>Start</th>
<th>End</th>
</tr>
</thead>
<tbody id = "output_cal_search">
</tbody>
</table>下面是html代码，如果我将它直接放入我的php文件，这与我在dynamich html输出中使用的代码是相同的：
<div class="col-xs-6 col-md-3 text-center">
<input type="text" class="knob" value="10" data-skin="tron"
data-thickness="0.1" data-width="90" data-height="90" data- fgColor="#00a65a">
<div class="knob-label">data-thickness="0.1"</div>
</div>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-12 08:36:41
您需要初始化动态添加的内容上的旋钮。这样就可以了，放在.append()之后
$('input.knob', '#output_cal_search').knob();请注意第二个参数，表示上下文。当然，您可以在整个文档上重新初始化：
$('input.knob').knob(); // equivalent to $('input.knob', document).knob()...if和，如果是，重新初始化所有旋钮没有任何坏处(不要丢失值，不要抛出错误)。
如果#output_cal_search包含旧的和新的旋钮，并且您不能重新初始化旧的旋钮，那么您唯一的选择就是向每个动态添加的容器添加一个自定义类(沿着needs-init的路线)，并使用该类仅针对新添加的内容：
$('input.knob', '.needs-init').knob();
// and remove the class immediately after:
$('.needs-init').removeClass('needs-init');我会将旋钮初始化放在for循环之外(特别是如果您重新启动了页面中的所有旋钮)，但我猜它也可以在其中工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51804603
复制相关文章
相似问题