javascript - 从 Slidr 菜单动态创建 Jquery Knob

Question

我正在使用网络音频在浏览器中开发一个类似合成器的程序。这可能听起来很愚蠢，但我似乎无法在单击按钮时创建旋钮。我尝试过以几种不同的方式设置旋钮，包括将 data- 前缀添加到旋钮属性中，但我似乎无法理解它。我目前的设置方式是这样的:

    $(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();
            });
    });

感谢任何帮助!

Answer 1

您必须设置所需的插件data-attribute，然后在新创建和附加的元素上执行该插件。

代码:

$(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();
    });
});

演示:http://jsfiddle.net/hD8LK/