adding jQuery.knob dynamically

Question

I have to dynamically generate HTML-Code that uses jKnob.

This code does work:

<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;" />

This code does not work:

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>

(The content is generated but without any style or knob functionality) So to shorten it up: The knob works when entered as HTML, but not when generated dynamically by JS.

Answer 1

You are missing a call to .knob();.

Try this:

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>

And see in action here: http://jsfiddle.net/tp8Xp/