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

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

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:

点击

根据jQuery的版本，这可能是一个

.live（）

问题，有关API描述，请参阅，但简而言之，侦听器只添加了一次，并且任何应用的新元素都没有侦听器

解决这个问题的方法是使用

.on（）

（是关于它的文档）

希望这有帮助

---

关于

根据jQuery的版本，这可能是一个

.live（）

问题，请参阅以获取API描述，但简而言之，侦听器只添加了一次，并且应用的任何新元素都没有侦听器

解决这个问题的方法是使用

.on（）

（是关于它的文档）

希望这有帮助

---

关于

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

 $('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();
 })    

$（“按钮”）。单击（函数（）{
$（'.main'）.append（''+
''+
''+
'');
自旋（）；
})    

---

工作示例：

是克隆存在一些问题：

 $('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();
 })    

$（“按钮”）。单击（函数（）{
$（'.main'）.append（''+
''+
''+
'');
自旋（）；
})    

---

工作示例：

代码的问题是，您正在代码中附加已启动的微调器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>

这是你的电话号码
p.S

由于您将销毁所有微调器并重新初始化所有微调器，因此使用此选项将导致额外的过载。因此，您可以只销毁最后一个微调器，也可以使用@Ramesh Kotha在其回答中给出的建议。
代码的问题是，您在代码中附加了已启动的微调器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>

这是你的电话号码
p.S

由于您将销毁所有微调器并重新初始化所有微调器，因此使用此选项将导致额外的过载。因此，您可以只销毁最后一个微调器，也可以使用@Ramesh Kotha在其答案中发布的建议。
为什么您不能附加初始化的微调器？i、 e:var$text=$（'）$spinnerText=$text.spinner（）$（'body'）。追加（$spinnerText）；您的回答解决了我的问题，但我想知道为什么在将微调器添加到DOM之前不能初始化微调器。为什么不能附加已初始化的微调器？i、 e:var$text=$（'）$spinnerText=$text.spinner（）$（'body'）。追加（$spinnerText）；您的回答解决了我的问题，但我想知道为什么在将微调器添加到DOM之前不能初始化微调器。