Question

我必须动态生成使用jKnob的HTML代码。

此代码工作：

<input id="dialSeconds" data-cursor="true" class="dial" data-width="125" data-height="125" data-thickness="0.275" data-min="0" data-max="59" 
                       data-readOnly="true" data-displayInput="false"
                       data-fgcolor="#999" value="59" style="position: relative !important; margin-top: -300px !important; color:#999 !important;" />

此代码不工作：

function ShowKnob() {
  var knob="<input id=\"dialSeconds\" data-cursor=\"true\" class=\"dial\" data-width=\"125\" data-height=\"125\" data-thickness=\"0.275\" data-min=\"0\" data-max=\"59\" data-readOnly=\"true\" data-displayInput=\"false\" data-fgcolor=\"#999\" value=\"59\" style=\"position: relative !important; margin-top: -300px !important; color:#999 !important;\" />";
$('#knob').html(knob)
}
<div id='knob'>boom</div>

（内容已生成，但没有任何样式或旋钮功能）所以要缩短它：旋钮在以HTML格式输入时起作用，但在由JS动态生成时不起作用。

Answer 1

您错过了对.knob();的调用。

试试这个：

function ShowKnob() {
  var knob="<input id=\"dialSeconds\" data-cursor=\"true\" class=\"dial\" data-width=\"125\" data-height=\"125\" data-thickness=\"0.275\" data-min=\"0\" data-max=\"59\" data-readOnly=\"true\" data-displayInput=\"false\" data-fgcolor=\"#999\" value=\"59\" style=\"position: relative !important; margin-top: -300px !important; color:#999 !important;\" />";
$('#knob').html(knob);
$('#knob').knob();
}
<div id='knob'>boom</div>

并在此处查看：http://jsfiddle.net/tp8Xp/

动态添加jQuery.knob

1 个答案: