jquery.ui.spinner change

Question

Я пытаюсь использовать последнюю версию jquery.ui.spinner.js. http://wiki.jqueryui.com/w/page/12138077/Spinner

Спиннеры показывают и обновляют текстовые поля, но у меня возникают проблемы с выяснением, как захватить событие «изменение». Он срабатывает, когда вы вручную изменяете значение в текстовом поле, но не при использовании стрелок вращения.

JQuery:

    $('input[name*="opening"]').spinner({ min: 0, max: 100});

    $('#doorsize6w7h-f').spinner().change(function(){
         alert($(this).spinner('value'));
    });

HTML:

<input type="text" value="0" class="front" id="doorsize6w7h-f" name="opening[0][0]" />

Answer 1

Прикрепите событие к элементам управления счетчика, которое вызывает change() в вашем текстовом поле.

$('.ui-spinner-button').click(function() {
   $(this).siblings('input').change();
});

jsFiddle .

После настройки счетчика.

Answer 2

Я думаю, это то, что вам нужно:

$('.mySpinner').spinner({          
    stop:function(e,ui){
        alert('Triggered after a spin.');
    }
});

В отличие от привязки к событию click кнопок, это также обнаружит использование клавиш вверх / вниз на клавиатуре.

Смотрите эту страницу для деталей и больше событий: http://api.jqueryui.com/spinner/#entry-examples

Answer 3

Событие "change" отсутствует, вместо этого используйте событие "spinstop":

$('#doorsize6w7h-f').on("spinstop", function(){
   alert($(this).spinner('value'));
});

Документация также предлагает spinchange событие, но для меня это немного отстает.

Ресурс: http://api.jqueryui.com/spinner/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DUI%2FSpinner%2Fspinner%26redirect%3Dno#event-change

Answer 4

Ну, на самом деле я бы направил изменения через стандартное событие 'change' и захватил бы все, как это:

$('input[name*="opening"]').spinner({
    min: 0,
    max: 100,
    spin: function(event, ui) {
        $(this).change();
    }
});

Answer 5

Это дает мне самые плавные результаты:

function betterSpinner(input)
{
    input.spinner(
    {
        spin: function(event, ui)
        {
            // the spin event is raised before the value actually gets changed,
            // so let's update it here before raising the input's change() event.
            input.val(ui.value);
            input.change();
        }
    });
}

$(document).ready(function ()
{
    betterSpinner($("#myInput"));
});

Answer 6

Я знаю, что на этот вопрос уже был дан ответ. Но я надеюсь, что это поможет другим.

Помимо редактирования значения вручную и с помощью кнопки со стрелкой счетчика, можно также изменить значение счетчика с помощью кнопки со стрелкой на клавиатуре. В этом случае я считаю, что событие keyup более устойчиво, чем событие change:

$(document).ready(function(){
    var range_spinner = $('.spinner').spinner(); 

    // hack to trigger input keyup whenever spinner button clicked:
    $('.ui-spinner-button').click(function() { $(this).siblings('input').keyup(); });   

    // keyup will catch any stroke on keyboard
    $('#range').keyup(function(){
       console.log(range_spinner.spinner('value')); 
    });
});