JQuery UI Slider arbeitet nicht mit doppelten

Question

Wir haben mit JQuery UI Slider aber nach Klon es uns diese Fragen konfrontiert hatten

• New geklonter Schieber nicht !!

• Wenn der Eingabewert geändert wurde, wurden alle Schieberegler nicht verschoben und der Hintergrund wurde nicht geändert.

  können Sie ein Live-Beispiel sehen hier

  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

Sie müssen die Folie-Funktion wieder verwenden, wenn Sie auf die Schaltfläche klicken.

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

Klon-Option ist es auch Ereignisse zu kopieren. Weitere Änderungen sind erforderlich, um Elemente auf die Teile anzuwenden, die den Schieberegler anwenden. https://api.jquery.com/clone/#clone-withDataAndEvents