spin event doesn't trigger at first time in jquery spinner

Question

I have created a custom spinner which appends a string after a number.

var percent = 5.5%;
$.widget("ui.pcntspinner", $.ui.spinner, {
        _format: function(value){
            return value + " %";
        },

        _parse: function(value){
            return parseInt(value);
        }
    });


    $("#spinner").pcntspinner().val(percent);

The spinner has two events attached to it ie focusout and spin. focusout works fine in first call too, but spin does not gets triggered at first time. Only after any other event has been triggered does the spin gets called. Any idea to solve this problem?

Answer 1

You are extending the widget so spin won't work you need _spin

$.widget("ui.pcntspinner", $.ui.spinner, {
    _format: function(value){
        return value + " %";
    },

    _parse: function(value){
        return parseInt(value);
    },

    _spin: function( event, ui ) { 
       alert('value updated by :' + ui);

       if(validation){
         var result = this._super( event, ui ); 
         return result; //<-- important for generic functionality
       }else
       {
         //returning nothing would make value not change
       }
    }
});

Answer 2

Found the solution. I still don't understand though why spin was not getting triggered the first time but this helped -

var percent = 5.5%;
$.widget("ui.pcntspinner", $.ui.spinner, {

         widgetEventPrefix: "spin",
        _format: function(value){
            return value + " %";
        },

        _parse: function(value){
            return parseInt(value);
        }
    });


    $("#spinner").pcntspinner().val(percent);