Question

I don’t know if I’m saying this right, so I’ll just ask by explaining with an example.

Let’s say I’ve written a jQuery plugin with an onShowEdit callback.

I later use my plugin and add a bunch of other default functions/methods to the event:

$('.editable_module:not(.custom)').editable({
   onShowEdit: function(el){
      initRequired();
      $(':radio, :checkbox', el).prettyCheckboxes();
      initDatePickers();
      initChosen();
      initMaskedInputs();
      $('.dynamic_box.tabs').dynamicBoxTabs();
      $('.trigger_dynamic_box').triggerDynamicBox('true');
   }
});

So now I have a basic/default element (.editable_module) that calls the plugin and has some methods/functions that are going to be used in all instances.

My question comes when I have a need to add something to this for a ‘one time’ kind of deal (I need to add some behavior to this callback/event but not something that is used normally). Is it possible to extend or add to this callback/event without overwriting it? I mean, I know I can go in and do this:

$('#new_selector').editable({
   onShowEdit: function(el){
      initRequired();
      $(':radio, :checkbox', el).prettyCheckboxes();
      initDatePickers();
      initChosen();
      initMaskedInputs();
      $('.dynamic_box.tabs').dynamicBoxTabs();
      $('.trigger_dynamic_box').triggerDynamicBox('true');

      //ADD SOME NEW STUFF HERE
   }
});

But is that really my only option?

Thanks in advance for any input/suggestions.

Answer 1

You could consider jQuery’s own event system as follows: http://jsfiddle.net/VQqXM/1/. You can integrate this in your $.fn function pretty easily – just pass the appropriate function as property of the object instead of a function literal.

$("input").on("foo", function() {
    alert(1);
});

// later

$("input").on("foo", function() {
    alert(2);
});

// later

$("input").trigger("foo"); // alerts 1 and 2

You can simply use .on/.off to bind and unbind events, and trigger them all with .trigger. jQuery also supports namespacing of the event names to make sure you’re not using an already used event.