Question

I’m writing a jQuery plugin that will need callback functions that are executed, for example, when an option is chosen from the <select> the plugin is applied to.

I’ve seen plugins that allow you to define functions in the options you pass it, like this:

$('div.foo').pluginBar({ 
    option1: 'red',
    someEvent: function() {
        // Do stuff
    }
});

I want to be able to define a default someEvent function in my plugin code, but if the user defines that function in the options they pass, it should overwrite the default function. Is this possible with $.extend(), or am I look in the wrong places?

I’ve had a look at the plugin authoring tutorial, but I don’t think it covers extending the default behaviour of functions anywhere. I’ve read things about using an init: function, but I’d rather just be able to define a function (inside the plugin namespace) and change it with the options passed to the plugin.

Answer 1

Here’s an example:

(function( $ ) {
  $.fn.pluginBar = function(options) {
      var settings = $.extend( {
          someEvent: function() {
              alert('default');
          }
      }, options);

      return this.each(function() {
          settings.someEvent();
      });
  };
})( jQuery );

$('div.foo').pluginBar({ 
    option1: 'red',
    someEvent: function() {
        alert('custom');
    }
});

If you don’t specify someEvent when wiring up the plugin, the default one will be used.