Dynamically adding JQuery Knob

[ghost]

Does anyone know how to configure dynamically added jQuery Knobs? I have several knobs in a bootstrap Collapse element, whose content html is dynamically loaded from a file when activated.

The problem is, my knob configuration happens on page load, as I also have knobs outside collapses on the main page; this means that the knobs inside the collapse simply load as input boxes as they are not configured.

Can't figure out a way round this, so any help would be appreciated!

[zxfrank]

You can call $('your element').knob(...) after your elements are rendered instead of on documentready. Then if you want to change value, call $('your element').val(newValue).trigger('change');

[ghost]

Thanks @zxfrank, this worked great, should have figured this out from the demo!

[ghost]

Actually... I failed to notice that though the knobs are now configured as knobs (whereas before they were simply rendered as an input box), the change callback does not get called when the knob is moved.

My knob (as part of a larger chunk of html with some other elements) is dynamically loaded as below:

        $.get("Content/Steps/steps_B.html", function( content ) {
          document.getElementById("seq_row_B_"+row).innerHTML = content;
          $('.knob-dyn').knob();
        });

and my knob() function (which works for all non-dynamically loaded knobs) is as below:

        $(".knob").knob({
          'change' : function (value) {
          console.log("Change triggered.");
             if(manTrigger === 0)
                handleKnobEvent(this, value);
          },
          'release' : function (value) {
             if(manTrigger == 1)
               manTrigger = 0;
          }
         });//knob

UPDATE Just tested the dynamically loaded knobs on the demo page, and the 'change' function isn't triggered for these either.

UPDATE 2 Fixed this by storing my knob configuration as an object and passing it in wherever I load dynamic knobs.

        $.get("Content/Steps/steps_B.html", function( content ) {
          document.getElementById("seq_row_B_"+row).innerHTML = content;
          $('.knob-dyn').knob(dynKnobConfig);
        });

where dynKnobConfig is:

var dynKnobConfig = {
    'change' : function (value) {
      if(manTrigger === 0)
        handleKnobEvent(this, value);
    },
    'release' : function (value) {
        if(manTrigger == 1 )
          manTrigger = 0;
    }
};

Any thoughts would be greatly appreciated Tia