JQuery div clone更改ID，但javascript滑块函数不刷新

正在尝试使用滑块克隆div。我遵循的例子适用于克隆，但我的行为很奇怪。所有克隆的div的滑块句柄仅更改div one的滑块句柄

我认为这与将内容加载到客户端浏览器的顺序有关？我在这里问这个问题是因为我正在chrome开发控制台中调试，它显示div已经正确地增加了id，但是没有正常工作

HTML:

选择1
选择2
不适用


添加带滑块的Div

Javascript:

<script type="text/javascript">
            $('.slider').each(function(idx, elm) {
                    var name = elm.id.replace('Slider', '');
                $('#' + elm.id).slider({
                        min: 0,
                        max: 50,
                        value: 1,
                        step: 1,
                        slide: function(event, ui) {
                            $('#' + name).val(ui.value);
                        }
                    });
            });
    function fixIds(elem, cntr) {
        $(elem).find("[id]").add(elem).each(function() {
            this.id = this.id.replace(/\d+$/, "") + cntr;
        })
    }

    var cloneCntr = 2;
    $("#adddiv").click(function () { 
        var div = $("#choices1").clone(true,true) 
        fixIds(div, cloneCntr);
        div.insertAfter("#choices1") 
        cloneCntr++;
    }); 
        </script>

$（'.slider'）。每个（函数（idx、elm）{
变量名称=elm.id.replace（'滑块'，''）；
$（'#'+elm.id）.滑块({
分:0,，
最高：50，
价值：1，
步骤：1，
幻灯片：功能（事件、用户界面）{
$（'#'+name）.val（ui.value）；
}
});
});
功能fixIds（元素、cntr）{
$（elem）.find（“[id]”）.add（elem）.each（function（）{
this.id=this.id.replace（/\d+$/，“”）+cntr；
})
}
var-cloneCntr=2；
$（“#adddiv”）。单击（函数（）{
var div=$（“#choices1”）.clone（true，true）
fixIds（部门、克隆中心）；
第二部分插入符（“选择1”）
cloneCntr++；
}); 

问题在于，尽管您克隆了

#choicesN

div jQueryUI，但它已经添加了几个子元素，每个子元素都有自己的事件处理程序。这些事件处理程序尚未与子元素一起克隆。尽管您在

clone（）

中使用了

deepWithDataAndEvents

参数，但仍然存在这种情况；这是出了名的脆弱，尤其是jQueryUI

更好的方法是在克隆内容上实例化一个新的

slider（）

实例。还要注意，如果要克隆内容，请不要在内容上使用

id

属性。无论如何，您不应该需要它们，因为如果需要的话，可以通过DOM遍历将元素作为目标

let sliderOpts={
分:0,，
最高：50，
价值：1，
步骤：1，
幻灯片：（e，ui）=>$（ui.handle）.closest（'.slider'）.prev（）.find（'.SliderText'）.val（ui.value）
}
$（'.slider'）。每个（（i，el）=>{
$（el）.滑块（滑块指针）；
});
$（“#adddiv”）。单击（函数（）{
让$clone=$（“.choice:first”）.clone（）.insertAfter（“.choice:last”）；
$clone.find（'.slider'）.slider（sliderOpts）；
$clone.find（'.SliderText，select'）.val（''）；
});

选择1
选择2
不适用


添加带滑块的Div
<script type="text/javascript">
            $('.slider').each(function(idx, elm) {
                    var name = elm.id.replace('Slider', '');
                $('#' + elm.id).slider({
                        min: 0,
                        max: 50,
                        value: 1,
                        step: 1,
                        slide: function(event, ui) {
                            $('#' + name).val(ui.value);
                        }
                    });
            });
    function fixIds(elem, cntr) {
        $(elem).find("[id]").add(elem).each(function() {
            this.id = this.id.replace(/\d+$/, "") + cntr;
        })
    }

    var cloneCntr = 2;
    $("#adddiv").click(function () { 
        var div = $("#choices1").clone(true,true) 
        fixIds(div, cloneCntr);
        div.insertAfter("#choices1") 
        cloneCntr++;
    }); 
        </script>