1

小提琴示例

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

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>
4

3 回答 3

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

于 2015-02-16T17:04:26.333 回答
2

您的代码的问题是您在代码中附加了已经启动的微调器 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">▲&lt;/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">▼&lt;/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">▲&lt;/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">▼&lt;/span></span></a>
    </span>
</div>

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

因此，为了防止destroy在克隆元素之前简单地调用微调器事件。

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

这是工作小提琴

附言

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

于 2015-02-16T17:40:07.390 回答
0

取决于 jQuery 的版本，这可能是一个.live()问题，请参阅这里的 API 描述，但简而言之，监听器只会添加一次，并且任何应用的新元素都没有监听器。

可以使用解决方案.on()（here is the doc about it）。

希望这可以帮助。

问候

于 2015-02-16T17:01:08.857 回答