带有jQuery UI滑块的动态输入字段不起作用

Question

我正在尝试使用jquery向上滑块创建动态输入字段，但是该滑块仅适用于第一个字段，不适用于动态字段。这是fiddle

<uses-permission android:name="${gcmPermission}" />

<permission
    android:name="${gcmPermission}"
    android:protectionLevel="signature" />

$(window).load(function(){

$( "#slider-range" ).slider({
              min: 0,
              max: 100,
              values: [ 0],
              slide: function( event, ui ) {
                $( "#tasks_status" ).val( ui.values[ 0 ] );
              }
            });

            $("#tasks_status").change(function() {
                $("#slider-range").slider('values',0,$(this).val());
            });						
            
            //Create dynamic form
			    var i=1;  
				  $('#add').click(function(){  
					   i++;  
					   $('#dynamic_field')
					   .append 
					   ('<tr id="row'+i+'" class="dynamic-added"><td width="50%"><input type="text" id="tasks_name" name="tasks_name[]" placeholder="Enter task Name" class="form-control" required/></td><td width="30%"><div id="slider-range"></div></td><td width="15%"><input type="text" id="tasks_status" name="tasks_status[]" placeholder="0" class="form-control" required/></td><td width="5%"><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
				  });  
				  $(document).on('click', '.btn_remove', function(){  
					   var button_id = $(this).attr("id");   
					   $('#row'+button_id+'').remove();  
				  });







});

.container{
  margin-top:60px;
  
}
.table td, .table th {
    padding: .1rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

Answer 1

尝试一下：请勿多次使用相同的ID。将select stuff ( ( SELECT DISTINCT ', ' + RTRIM(LTRIM(MACHNAME)) FROM ( SELECT DISTINCT RTRIM(LTRIM(MACHNAME)) FROM MACHS WHERE MACHID <> 0 EXCEPT SELECT DISTINCT RTRIM(LTRIM(MACHNAME)) FROM GROUPS WHERE GROUPS.GROUPTYPE = 'M' ) DS (MACHNAME) for xml path ('') ) ,1 ,2 , '' ) as machineName 替换为class而不是id，并在html和附加代码中将其替换。另外，您需要在每个新创建的元素上应用滑块，因此在添加新行后调用相同的函数。

注意-用类名或动态ID替换所有重复的ID

slider-range

$(window).load(function(){

    $( "#slider-range" ).slider({
              min: 0,
              max: 100,
              values: [ 0],
              slide: function( event, ui ) {
                $( "#tasks_status" ).val( ui.values[ 0 ] );
        }
     });

     $(document).on("change","input[id^=tasks_status]", function() {
          var $parent = $(this).closest('tr');
          $parent.find("div[id^=slider-range]").slider('values',0,$(this).val());
     });						
            
     //Create dynamic form
	  var i=1;  
	  $('#add').click(function(){  
	   i++;  
	   $('#dynamic_field')
			   .append 
		   ('<tr id="row'+i+'" class="dynamic-added"><td width="50%"><input type="text" id="tasks_name" name="tasks_name[]" placeholder="Enter task Name" class="form-control" required/></td><td width="30%"><div id="slider-range' + i +'"></div></td><td width="15%"><input type="text" id="tasks_status' + i +'" name="tasks_status[]" placeholder="0" class="form-control" required/></td><td width="5%"><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>'); 
            var sliderId = "#slider-range" + i;
            var statusId = "#tasks_status" + i;
            $(sliderId).slider({
                      min: 0,
                      max: 100,
                      values: [ 0],
                     slide: function( event, ui ) {
                       $(statusId).val( ui.values[0] );
             }
            }); 
   	      });  
	
       $(document).on('click', '.btn_remove', function(){  
		   var button_id = $(this).attr("id");   
		   $('#row'+button_id+'').remove();  
		});
});

.container{
  margin-top:60px;
  
}
.table td, .table th {
    padding: .1rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}