Question

Here I have a widget and I want to call a function once #slider.slider();. what is the code?

$( "#slider" ).slider({  

    //initial function here.
    alert("A");

    value: 50,
    slide: function(event, ui) {
           displaySlideValue();
    }

});

Answer 1

Why not just do

$('#slider').slider({ ... }).each(function() { /* your code here */ });

Alternatively you could wrap the .slider() call in your own mini-extension:

$.fn.sliderWithInit = function(params, init) {
  return this.slider(params).each(init);
});

then you could say

$('#slider').sliderWithInit({ /* params */ }, function() { /* init code */ });

Obviously “slider” could be made generic:

$.wrapWithInit = function(widgetName) {
  $.fn[widgetName + 'WithInit'] = function(params, init) {
    return this[widgetName](params).each(init);
  });
});

Then you can do it for “dialog” for example:

$.wrapWithInit('dialog');
$('#dialog').dialogWithInit({ /* dialog params */ }, function() { /* init code */ });

As @mikerobi points out, it’s not 100% clear when you want your initialization function to be called. Most widgets have an “onFoo” type callback that’s called when the widget is activated (whatever that means for the given widget). If you just want to initialize on the first call, you could just make the callback be a closure that keeps track of whether it’s ever done the initialization work. If it detects it’s already done it, it would just return.