In JavaScript, is it possible to add a callback function instead of overwriting it?

Question

I don’t know if I am saying this correctly, so I’ll just ask, explaining the example.

Say I wrote a jQuery plugin with onShowEdit .

Later I use my plugin and add a few other default functions / methods to it:

 $('.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 contains some methods / functions that will be used in all instances.

My question arises when I need to add something to this for a one-time deal (I need to add some kind of behavior to this callback / event, but not to what is commonly used). Is it possible to extend or add to this callback / event without overwriting it? I mean, I know I can go 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 this really my only option?

Thanks in advance for any input / suggestions.

Answer 1

You can consider your own jQuery event system as follows: http://jsfiddle.net/VQqXM/1/ . You can easily integrate this into your $.fn function - just pass the corresponding function as an object property 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 untie events and fire them all with .trigger . jQuery also supports namespacing event names to make sure you are not using an event that has already been used.

Answer 2

You can use the new $.Callbacks() method

 var $onShowEditCBObj = $.Callbacks(); function onShowEditHandler() { $onShowEditCBObj.fire(); } $('#new_selector').editable({ onShowEdit: onShowEditHandler }); // add default event to callbacks obj $onShowEditCBObj.add(function(){ initRequired(); $(':radio, :checkbox', el).prettyCheckboxes(); initDatePickers(); initChosen(); initMaskedInputs(); $('.dynamic_box.tabs').dynamicBoxTabs(); $('.trigger_dynamic_box').triggerDynamicBox('true'); }); // add a one time method to the callbacks obj function oneTimeEvent () { alert("worky"); $onShowEditCBObj.remove(oneTimeEvent); } $onShowEditCBObj.add(oneTimeEvent) 

With this setting, you can change which callbacks will be launched without having to do anything extra for the editable plugin.

Edit: I did not understand that you wrote the plugin. With that in mind, pimvdb's answer is more robust than requiring a particular code from the developer.

Answer 3

If I understand the question correctly, the key word here is "factory".

jQuery itself is a factory, but to get what you describe, you need your plugin as a factory in a factory. This requires the plugin to be written in a certain way.

Probably the easiest way is to use the jQuery UI factory widget. Read about it here .

Answer 4

Defining a separate function for onShowEdit should work.

 var myOnShowEdit = function(el, extra_fn) { //standard functionality goes here if (typeof extra_fn==='function') extra_fn(); //support for extra stuff } $('.editable_module:not(.custom)').editable({ onShowEdit: function(el) { myOnShowEdit(el); } }); $('#new_selector').editable({ onShowEdit: function(el) { myOnShowEdit(el, function(){console.log('hi');}); } }); 

This will give you the right flexibility to add whatever functionality you need, in addition to the standard materials. Just know how this can change contexts.