动态创建的 jQueryUI 微调器不工作

Question

我在页面上有多个微调器。它们的最小值、最大值和步骤取决于它们自己的微调器的数据属性。我一直在使用这段代码来调用微调器：

function spin(){
$( ".spinner" ).each(function(){
   var self = $(this),
       min = self.data('min'),
       max = self.data('max'),
       step = self.data('step');
   $(this).spinner({
    min: min, 
    max: max,
    step: step,
    icons: {up:"tuparrow",down:"tdownarrow"}
  })
});
}
$(document).ready(function(){    
  spin();
})

但我发现当点击动态创建微调器时，spin() 函数在 after 之后被调用后无法正常工作。谁能知道是什么问题？

 $('button').click(function(){
   var area = $('.area').last(),
   newone = area.clone();
   area.after(newone);
   spin();
 })

HTML:

<button>Click</button>
<div class="area">
  <input data-max="50" data-step="0.01" data-min="0" class="spinner" type="text" name="width[]">
  <input data-max="20" data-step="0.50" data-min="0" class="spinner" type="text" name="diameter[]">
</div>

Answer 1

根据jQuery的版本，可能是.live()的问题，API的描述见this，总之，听众们只添加一次，任何应用的新元素都没有监听器。

可以使用 .on() 解决此问题（here 是关于它的文档）。

希望对您有所帮助。

此致

Answer 2

是的，克隆有一些问题：

 $('button').click(function(){

   $('.main').append('<div class="area">'+
    '<input data-max="50" data-step="0.01" data-min="0" class="spinner" type="text" name="width[]"/>'+
    '<input data-max="20" data-step="0.50" data-min="0" class="spinner" type="text" name="diameter[]"/>'+
    '</div>');
   spin();
 })

工作示例：JSFIDDLE

Answer 3

您的代码的问题是您在代码中附加了已经启动的微调器 html 块，并且您正在尝试为该块重新初始化微调器。

所以，你的 var area = $('.area').last() 会导致，

<div class="area">
<span class="ui-spinner ui-widget ui-widget-content ui-corner-all"><input data-max="50" data-step="0.01" data-min="0" class="spinner ui-spinner-input" type="text" name="width[]" aria-valuemin="0" aria-valuemax="50" autocomplete="off" role="spinbutton"><a class="ui-spinner-button ui-spinner-up ui-corner-tr ui-button ui-widget ui-state-default ui-button-text-only" tabindex="-1" role="button" aria-disabled="false"><span class="ui-button-text"><span class="ui-icon tuparrow">▲</span></span>
    </a><a class="ui-spinner-button ui-spinner-down ui-corner-br ui-button ui-widget ui-state-default ui-button-text-only" tabindex="-1" role="button" aria-disabled="false"><span class="ui-button-text"><span class="ui-icon tdownarrow">▼</span></span></a>
    </span>
<span class="ui-spinner ui-widget ui-widget-content ui-corner-all"><input data-max="20" data-step="0.50" data-min="0" class="spinner ui-spinner-input" type="text" name="diameter[]" aria-valuemin="0" aria-valuemax="20" autocomplete="off" role="spinbutton"><a class="ui-spinner-button ui-spinner-up ui-corner-tr ui-button ui-widget ui-state-default ui-button-text-only" tabindex="-1" role="button" aria-disabled="false"><span class="ui-button-text"><span class="ui-icon tuparrow">▲</span></span>
    </a><a class="ui-spinner-button ui-spinner-down ui-corner-br ui-button ui-widget ui-state-default ui-button-text-only" tabindex="-1" role="button" aria-disabled="false"><span class="ui-button-text"><span class="ui-icon tdownarrow">▼</span></span></a>
    </span>
</div>

它已经通过 Spinner 初始化，因此再次重新初始化它不会有任何效果，因为效果已经存在于您的代码部分，从而导致问题。

因此，要防止这种情况发生，只需在克隆元素之前调用微调器的 destroy 事件即可。

$( ".spinner" ).spinner( "destroy" );
var area = $('.area').last()

这是Working Fiddle

P.S

使用它会造成额外的过载，因为您将销毁所有微调器并重新初始化所有微调器。因此，您可以只销毁最后一个微调器，也可以使用 @Ramesh Kotha 在他的回答中发布的建议。

动态创建的 jQueryUI 微调器不工作

dynamically created jQueryUI spinner not working

javascript

jquery

jquery-ui

jquery-ui-spinner

这是Working Fiddle