jQuery UI的滑块是不是有重复

Question

工作我们已经使用jQuery UI的滑块，但克隆后，我们曾面临这些问题

• 新克隆的滑块滑动不！

• 当输入值改变时，所有滑块不滑动和背景没有改变！

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

  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://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); 
      } 
     }); 
    }); 
} 

Answer 2

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