Question

How does jQuery-UI know to bind callbacks passed as init options? I’m thinking the answer is somewhere in the $.widget.bridge method (ln 71) but I’m not entirely sure what’s going on there.

An example of what I’m talking about is something like the autocomplete search event. The code example shows that I can bind to ‘search’ with init options but I don’t see anything specific to this behavior autocomplete’s code.

This technique seems cool. I’d like to leverage it.

Answer 1

I’m not that familiar with the jQueryUI code, but here’s an example of how you could call a callback passed as an argument.

Try it out: http://jsfiddle.net/pshLK/

When the example loads, you’ll get 2 alerts. This is the result of the callback that was passed running for both of the matched <div> elements. You can change the callback function and click “Run” at the top to see that your callback is running.

(function($) {
       // create myPlugin
    $.fn.myPlugin = function(options) {
           // iterate through all elements the selector matched
        return this.each(function() {
                // Change the color to blue
            $(this).css('color','blue');
                // Call the callback using the .call() method
                //    so that we can pass the value of "this"
                //    as the element in the iteration
            options.callback.call(this);
        });
    };
})(jQuery);

   // Find all <div> elements on the page, and call myPlugin which
   //   receives an object as an argument that has a "callback" property
   //   whose value is the function that will be called in the plugin.
$('div').myPlugin({
         // This function will run for each <div> displaying the ID of the <div>
    callback:function() { alert('the id is ' + this.id); }
});