jquery.ui.spinner change

Question

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

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

Answer 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