dynamically create Jquery Knob from Slidr menu

Question

I'm working on a synth-like program in the browser using web audio. This may sound stupid, but I can't seem to get the button to create the knob when it's clicked. I've tried setting up the knob in a few different ways including, adding the data- prefix to the knobs attributes, but i can't seem to get it. The way I currently have it set up is this:

    $(document).ready(function() 
    {
        var add_osc = $('li#add_osc');
        var osc;
        var add_dest = $('li#add_dest');
        var dest;
        var add_fx = $('li#add_fx');
        var fx = $('.fx');
        //left side menu
        $('#simple-menu').sidr();
        //hide sound fx in menu
        $(".fx").hide();
        //general purpose knob <----- **PROBLEM CODE** -----!
        add_osc.click(function()
            {
                var input = $('document').createElement("input");
                input.type = "text";
                input.addClass('dial');
                $(".dial").knob();
                input.min = 0;
                input.max = 100;
                input.displayPrevious = true;
                input.lineCap = "round";
                input.width = 100;
                input.value = 0;
                $("body").append(input);
            });
        //toggle fx list
        add_fx.click(function() 
            {
                fx.toggle();
            });
    });

any help is appreciated!

score 1 · Accepted Answer · answered May 04 '14 at 09:04

You have to set the needed plugin data-attribute and than execute the plugin on the newly created and appended element.

Code:

$(document).ready(function () {
    var add_osc = $('li#add_osc');
    var osc;
    var add_dest = $('li#add_dest');
    var dest;
    var add_fx = $('li#add_fx');
    var fx = $('.fx');

    //hide sound fx in menu
    $(".fx").hide();
    //general purpose knob <----- **PROBLEM CODE** -----!
    add_osc.click(function () {
        var $input=$("<input type='text'>")
        $input.addClass('dial');
        $input.attr('data-min', 0);
        $input.attr('data-max', 100);       
        $input.attr('data-displayPrevious', true);
        $input.attr('data-lineCap', 'round');
        $input.attr('data-width', 100);
        $input.val(0);
        $("body").append($input);
        $input.knob();
    });
    //toggle fx list
    add_fx.click(function () {
        fx.toggle();
    });
});

Demo: http://jsfiddle.net/hD8LK/

dynamically create Jquery Knob from Slidr menu

1 Answers1