1

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 によって動的に生成された場合は機能しません。

4

1 に答える 1

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/

于 2014-01-29T23:03:44.080 に答える