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

是的，克隆存在一些问题：

 $('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 2

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

因此，您的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 在其答案中发布的建议。

Answer 3

根据jQuery的版本，它可能是.live()问题，请参阅this获取API描述，但简而言之，只能在一次添加侦听器，以及任何新元素适用的没有听众。

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

希望这有帮助。

此致

动态创建的jQueryUI微调器无法正常工作

3 个答案:

这是Working Fiddle