Динамически созданный спиннер 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:

<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>
Источник

3 ответа

Решение

Проблема с вашим кодом заключается в том, что вы добавляете в свой код уже инициированный блочный блок spinner и пытаетесь повторно инициализировать 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()

Вот рабочая скрипка

PS

Использование этого создаст дополнительную перегрузку из-за того, что вы будете уничтожать весь счетчик и повторно инициализировать весь счетчик. Таким образом, Вы можете либо уничтожить только последний спиннер, либо воспользоваться предложением, опубликованным @Ramesh Kotha в своем ответе.

Источник

Да, есть некоторые проблемы с клоном:

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

Источник

В зависимости от версии jQuery это может быть .live() проблема, посмотрите это для описания API, но вкратце, слушатели добавляются только один раз, и любой новый элемент, который применяется, не имеет слушателя.

Решением для этого может быть использование .on() ( вот документ об этом).

Надеюсь это поможет.

С уважением

Источник
Другие вопросы по тегам