JQuery ui 滑块无法使用重复项

Question

我们使用了 JQuery ui Slider 但在克隆它之后我们遇到了这些问题

新克隆的滑块不滑动!!
输入值改变时，所有滑块不滑动，背景不改变!!

你可以在这里看到一个活生生的例子

https://jsfiddle.net/earngate/ohfco7zn/1/

HTML

<!-- HTML Code -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

<div id="entry" class="markup scoreSlide">
<input type="text" id="" class="scoreID" value="3" />
<div class="scoreSlider"></div> <p />
</div>
<input type="button" id="btnAdd" value="add new slider">

Javascript

        $(window).load(function(){

        jQuery(".scoreSlide").each(function(){
        jQuery(this).find('.scoreSlider').slider({
        animate: true,
        range: "min",
        value: jQuery('.scoreID').val(),
        min: 1,
        max: 10,
        step: 1,
        slide: function(event, ui) {

        $(this).parent().find('.scoreID').val(ui.value);
        }
        });
        });


        $('#btnAdd').click(function () {
        $(".scoreSlide:last").clone(true,true).insertBefore(this);


        });

        });//]]>

Answer 1

克隆选项也是复制事件。需要进行其他更改才能将元素应用于应用滑块的部件。 https://api.jquery.com/clone/#clone-withDataAndEvents

Answer 2

点击按钮时必须复用滑动功能

https://jsfiddle.net/ooxwtyog/

function sliding(){
jQuery(".scoreSlide").each(function(){
        jQuery(this).find('.scoreSlider').slider({
            animate: true,
            range: "min",
            value: jQuery('.scoreID').val(),
            min: 1,
            max: 10,
            step: 1,
            slide: function(event, ui) {

                $(this).parent().find('.scoreID').val(ui.value);
            }
        });
    });
}

JQuery ui 滑块无法使用重复项

JQuery ui Slider is not working with duplicate

javascript

jquery

clone

jquery-ui

uislider