Javascript 动态生成的滑块将不起作用

我有一个长方体阴影生成器，每个值有4个滑块（x轴、y轴、模糊、扩散） 我还通过javascript创建了第五个滑块（我希望此滑块启用/禁用inset属性） 问题是它不起作用： 这是我的密码：

$（文档）.ready（函数（）{
$（“#代码”）.css({
“$（文档）.ready（函数（）{
$（“#代码”）.css({
“边框”：“3件纯金”，
“填充”：“4px”，
“颜色”：“浅蓝色”
});
$（“#inset”）.css（'width'，'10%）；
$（“.slider”）.change(
函数（）{
var x=$（“#x”）.val（）+“px”；
变量y=$（“#y”）.val（）+“px”；
var b=$（“#模糊”）.val（）+“px”；
var s=$（“#价差”）.val（）+“px”；
var代码=x+y+b+s+“道奇蓝”；
$（“.generator”）.css（“框阴影”，代码）；
$（“.h-shadow”）.html（x）；
$（“.v-shadow”）.html（y）；
$（“.blur”）.html（b）；
$（“.spread”）.html；
});
$（“#优化”）。之前(
"");
$（“#boxSub”）。单击(
函数（）{
$（“.slider”）.val（0）；
$（'.Code'）.html（“0”）；
$（“.blur”）.html（“0”）；
$（“.spread”）.html（“0”）；
$（'.generator'）.css（“框阴影“，$（“#boxShadowf”）.val（）；
});
$（“#插图”）。更改(
函数（）{
var ins=$（“#插入”）.val（）；
如果（ins==“1”）{
var代码=x+y+b+s+“道奇蓝插图”；
$（“.generator”）.css（“框阴影”，代码）；
}否则{
var代码=x+“”+y+“”+b+“”+s+“道奇蓝”；
$（“.generator”）.css（“框阴影”，代码）；
}
});
$（“#切换代码”）。单击(
函数（）{
$（'.code'）。切换（789）；
});
$（“#优化”）。单击（函数（）{
/****
通过查找排列和模糊值来优化代码
如果其中任何一个等于0或0px，则删除或打印空字符串
***/
var b=$（“.blur”）.html（）；
var s=$（“.spread”）.html（）；
如果（b==“0”| b==“0px”&s！=“0”| s！=“0px”）{
$（“.blur”）.html（b）；
}否则{
如果（b==“0”| | b==“0px”）{
$（“.blur”）.html（“”）；
}
如果（s==“0”| | s==“0px”）{
$（“.spread”）.html（“”）；
}
}
});
$（“#重置代码”）。单击（函数（事件）{
$（“.slider”）.val（0）；
$（'.generator'）.css（'box-shadow'，'0px 0px 0px 0px'）；
$（'.Code'）.html（“0”）；
$（'.v-shadow'）.html（“0”）；
$（'.blur'）.html（“0”）；
});
});
边框“：”
3像素纯金“
填充“：”
4像素“
颜色“：”
浅蓝色“}）；
$（“#inset”）.css（'width'，'10%）；
$（“.slider”）.change(
函数（）{
var x=$（“#x”）.val（）+“px”；
变量y=$（“#y”）.val（）+“px”；
var b=$（“#模糊”）.val（）+“px”；
var s=$（“#价差”）.val（）+“px”；
var代码=x+y+b+s+“道奇蓝”；
$（“.generator”）.css（“框阴影”，代码）；
$（“.h-shadow”）.html（x）；
$（“.v-shadow”）.html（y）；
$（“.blur”）.html（b）；
$（“.spread”）.html；
});
$（“#优化”）。之前(
"");
$（“#boxSub”）。单击(
函数（）{
$（“.slider”）.val（0）；
$（'.Code'）.html（“0”）；
$（“.blur”）.html（“0”）；
$（“.spread”）.html（“0”）；
$（'.generator'）.css（“框阴影“，$（“#boxShadowf”）.val（）；
});
$（“#插图”）。更改(
函数（）{
var ins=$（“#插入”）.val（）；
如果（ins==“1”）{
var代码=x+y+b+s+“道奇蓝插图”；
$（“.generator”）.css（“框阴影”，代码）；
}否则{
var代码=x+“”+y+“”+b+“”+s+“道奇蓝”；
$（“.generator”）.css（“框阴影”，代码）；
}
});
$（“#切换代码”）。单击(
函数（）{
$（'.code'）。切换（789）；
});
$（“#优化”）。单击（函数（）{
/****
通过查找排列和模糊值来优化代码
如果其中任何一个等于0或0px，则删除或打印空字符串
***/
var b=$（“.blur”）.html（）；
var s=$（“.spread”）.html（）；
如果（b==“0”| b==“0px”&s！=“0”| s！=“0px”）{
$（“.blur”）.html（b）；
}否则{
如果（b==“0”| | b==“0px”）{
$（“.blur”）.html（“”）；
}
如果（s==“0”| | s==“0px”）{
$（“.spread”）.html（“”）；
}
}
});
$（“#重置代码”）。单击（函数（事件）{
$（“.slider”）.val（0）；
$（'.generator'）.css（'box-shadow'，'0px 0px 0px 0px'）；
$（'.Code'）.html（“0”）；
$（'.v-shadow'）.html（“0”）；
$（'.blur'）.html（“0”）；
});
});
.generator{
宽度：10em；
高度：10公分；
背景：红色；}

盒子阴影发生器v1.0测试版
一种易于使用的盒阴影发生器
您可以按以下形式尝试自己的值：
获取val
切换码
重置代码
代码
div{

框阴影：0黑色
)

-webkit框阴影：0黑色
)

-moz长方体阴影：0黑色
)
}
优化代码
使用类似以下内容：


var down=false；
函数move（）{
向下=真；
var值=document.getElementById（“范围”）.value；
var value1=document.getElementById（“range1”）.value；
var value2=document.getElementById（“range2”）.value；
var value3=document.getElementById（“range3”）.value；
document.getElementById（“d”）.style.boxShadow=value+“px”+value1+“px”+value2+“px”+value3+“px”；
}
input{padding:10px}
左：

顶部：

模糊：

尺寸：
我对您的代码做了一点更改，我认为它可以工作：

$(document).ready(

function(){
$(".Code").html("0px")
    $("#optimize").show();
    $("#boxSub").css("margin-bottom","0.1em");
$("#optimize").before("<h3>inset?</h3><input type='range' value='0' min='0' max='1' class='slider' id='inset'/>");

$(".slider").change(
    function(){
            $p=$("#inset").val();
            var x=$("#x").val()+"px ";
            var y=$("#y").val()+"px ";
            var b=$("#blur").val()+"px ";
            var s=$("#spread").val()+"px ";
            $r=$("#red").val();
            $g=$("#green").val();
            $b=$("#blue").val();
            $color=" rgb("+$r+","+$g+","+$b+")";
            var code=x+y+b+s+$color;
            if (b != "0px"){$(".blur").show();}
            if (s != "0px"){$(".spread").show();}
            if ($p==="0"){
                code = code;
                $(".inset").hide();
            }
            else{
                code="inset "+code;
                $(".inset").show();
            }
            $(".generator").css("box-shadow",code);
            $(".h-shadow").html(x);
            $(".v-shadow").html(y);
            $(".blur").html(b);
            $(".spread").html(s);
            $(".color").html($color);
    });



$("#resetCode").click(
    function(){
        $(".slider:not(#inset)").val(0);
            $(".generator").css("box-shadow",code);
            $(".Code").html("0px");
            $(".color").html(" rgb(0,0,0)");
    });

    $("#boxShadowf").change(

        function (){
              $(".slider").val(0);
              $('.Code').html("0px");
              $(".color").html(" rgb(0,0,0)");

            $('.generator').css("box-shadow",$("#boxShadowf").val());
        });
    $("#toggleCode").click(

        function(){
            $("#code").toggle(768);
        });
    $("#generators").click(

        function(){
            alert("You might like to use some other generators such as..\nBorder Radius Generator!!!\nText shadow Generator!!\n\nkounelios13");
        });
    $("#optimize").click(
        function(){
            var blur=$(".blur").html();
            var spread=$(".spread").html();

            if($.trim(spread)==="0px"){
                 if($.trim(spread)==="0px" && $.trim(blur)==="0px"){
                    $(".spread").hide();
                    $(".blur").hide();
                 }
                 else{
                $(".spread").hide();
            }
            }

        });

});

$（文档）。准备好了吗(
函数（）{
$（“.Code”）.html（“0px”）
$（“#优化”）.show（）；
$（“#boxSub”）.css（“保证金底部”、“0.1em”）；
$（“#优化”）。之前（“插入？”）；
$（“.slider”）.change(
函数（）{
$p=$（“#插图”）.val（）；
var x=$（“#x”）.val（）+“px”；
变量y=$（“#y”）.val（）+“px”；
var b=$（“#模糊”）.val（）+“px”；
var s=$（“#价差”）.val（）+“px”；
$r=$（“#红色”）.val（）；
$g=$（“#绿色”）.val（）；