Jquery Plugins, calling functions from other methods

Question

Like so many other similar questions on here, I am writing my first jQuery plugin. It's intended to take a select element and replace the options with clickable list elements, to be used as swatches. I've got the main functionality working great, but I need to add the ability to call another method, which will disable certain options. My problem is that when doing this, I need to bind some click elements and unbind others.

Currently my original binding is contained in a function inside my 'init' method. I need to be able to call that function from another 'disable' method. So here's some code:

(function($){
var methods = {
 // Init method
 init : function(options) {
 // Set options
 var
 defaults = {
 clickCallback: function(){} // Define empty function for click callback
 }
 , settings = $.extend({}, defaults, options)
 // Function to bind options
 function fnBindOptions(var1, var2, var3) {
 // Stuff to bind elements
 // Hit the click callback
 settings.clickCallback.call(this); 
 } 
 return this.each(function() {
 // Check that we're dealing with a select element
 if(element.is('select')) {
 // Loop through the select options and create list items for them
 $('option', element).each(function() {
 // Stuff to create list elements
 // Bind click handler to the new list elements
 fnBindOptions(var1, va2, var3);
 });
 }
 });
 // return 
 return this(); 
 }
 // Disable buttons method
 , disable : function(options) {
 // I need to access fnBindOptions from here
 $(elementID).children('li').removeClass('disabled').each(function(){
 fnBindOptions(var1, var2, var3);
 });
 }
};

Here's my problem: I need to call the bind function on each option before disabling it - but I can't access fnBindOptions from within the disable method - and because fnBindOptions includes a callback from the 'settings' variable, I can't move it outside of the 'init' method either.

So, does anyone have any advice here?

Thanks!

Answer 1

One way to solve this is to put your defaults, settings and bindOptions function in the methods object (or another object in the broader scope) and reference them accordingly:

var methods = {
 defaults: {
 clickCallback: function() {}
 },
 settings: {},
 bindOptions: function(var1, var2, var3) {
 // Stuff to bind elements
 // Hit the click callback
 methods.settings.clickCallback.call(this);
 },
 // Init method
 init: function(options) {
 methods.settings = $.extend({}, methods.defaults, options);
 return this.each(function() {
 if (element.is('select')) {
 $('option', element).each(function() {
 // Stuff to create list elements
 // Bind click handler to the new list elements
 methods.bindOptions(var1, va2, var3);
 });
 }
 });
 },
 // Disable buttons method
 disable: function(options) {
 $(elementID).children('li')
 .removeClass('disabled')
 .each(function() {
 methods.bindOptions(var1, var2, var3);
 });
 }
};

• Eran Medan: I get a warning that "methods" might not yet be initialized, does this pass JSLint?
• mgol: @EranMedan: use jsHint, jsLint is way too restrictive.