RedGiant RedGiant - 2 months ago 12
Javascript Question

dynamically created jQueryUI spinner not working

Fiddle Example

I have multiple spinners on the page. Their minimums,maximums and steps depend on their own spinner's data-attributes. I have been using this code to call the spinner:

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


But I found that when spinners are dynamically created on click, the
spin()
function isn't working after being called following
after
. Can anyone know what is the problem?

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

The problem with your code is you are appending the already initiated spinner html block in your code and you are trying to re-initialize the Spinner for that block.

So, Your var area = $('.area').last() will result,

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

Which has been already put though the Spinner initialization , So re-initializing it again will have no effect since the effect is already present in your code portion , thus causing the issue.

So, To prevent that simply call destroy event of spinner before cloning the element.

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

Here is the Working Fiddle

P.S

Using this will put an extra overload due to the fact that you will be destroying all the spinner and re-initializing all the spinner. So, You can either destroy the last spinner only or use the suggestion as posted by @Ramesh Kotha in his answer.