JQuery UI Slider не работает с повторяющимися

Question

Мы с помощью JQuery 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://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