jquery.ui.spinner change

问题:

I'm trying to use the latest version of the jquery.ui.spinner.js . http://wiki.jqueryui.com/w/page/12138077/Spinner

The spinners are showing-up and updating the textboxes, but I'm having trouble figuring out how to capture the 'change' event. It triggers when you manually change the value in the textbox, but not when you use the spinner arrows.

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]" />

回答1:

Attach an event on the spinner controls that calls change() on your textbox.

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

jsFiddle.

After setting up the spinner.

回答2:

I think this is what you need:

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

Unlike binding to the click event of the buttons, this will also detect use of the up/down keys on the keyboard.

See this page for details and more events: http://api.jqueryui.com/spinner/#entry-examples

回答3:

There is no "change" event, instead use "spinstop" event:

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

The documentation also suggests spinchange event, but it's kind of laggy for me.

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

回答4:

Well, actually I would route changes through standard 'change' event and capture everything, like that:

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

回答5:

This is giving me the most fluid results:

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

回答6:

I know this question has already been answered. But I hope this will help others.

Beside manually edit the value and using the spinner's arrow button, one can also edit the value of spinner by using arrow button on keyboard. In this case, I find keyup event is more robust than change event:

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