Trouble passing callback to my jquery plugin -
i'm trying develop plugin takes callback first argument on init. i've tried modify plugin code official tutorial. can't figure out why what's wrong here:
the plugin:
(function( $ ){ var methods = { init : function( callback, options ) { // create defaults, extending them options provided var settings = $.extend( { 'location' : 'top', 'background-color' : 'blue' }, options); return this.each(function() { $this.click(function(e) { e.stoppropagation(); var $target = $(e.target); if (callback) callback($target); }); }); }, }; $.fn.myplugin = function( method ) { // method calling logic if ( methods[method] ) { return methods[ method ].apply( this, array.prototype.slice.call( arguments, 1 )); } else if ( typeof method === 'object' || ! method ) { return methods.init.apply( this, arguments ); } else { $.error( 'method ' + method + ' not exist on jquery.myplugin' ); } }; })( jquery );
calling plugin:
// create callback function var callback = function(){alert('hey');}; $('#my-control').myplugin(callback,{'width':'600px'});
the error:
method function (){alert('hey');} not exist on jquery.myplugin
this line:
else if ( typeof method === 'object' || ! method ) {
is causing $.error
condition (in next else
clause) fire off, since you're checking method name or options object , didn't account passing in argument of type function.
i recommend making callback
option part of options
object instead:
(function($) { var methods = { init: function(options) { console.dir(arguments); // create defaults, extending them options provided var settings = $.extend({ 'location': 'top', 'background-color': 'blue' }, options); return this.each(function() { $(this).click(function(e) { e.stoppropagation(); var $target = $(e.target); if (settings.callback) settings.callback($target); }); }); }, }; $.fn.myplugin = function(method) { // method calling logic if (methods[method]) { return methods[method].apply(this, array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method) { return methods.init.apply(this, arguments); } else { $.error('method ' + method + ' not exist on jquery.myplugin'); } }; })(jquery);
usage:
var callback = function(){alert('hey');}; $('#my-control').myplugin({'width':'600px', callback: callback});
example: http://jsfiddle.net/n66mu/
Comments
Post a Comment