动态添加 jQuery.knob

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/