Simple public function in simple jQuery plugin

Question

I'm having trouble providing my plugin with public functions, sort of what jQueryUI does I think. My plugin code is below.

When $("#someField").myPlugin({'editable':true}); is called it iterates over elements specified, in this case only one #someField and sets amount to 0.

Then somewhere from code I want to call public function set10 that would affect element #someField I passed to plugin earlier on.

So when $("#someField").myPlugin("set10"); is called via switch statement it sets amount to 10. Now however when I click the field and code inside click is executed it shows amount as 0 again.

I don't understand why this doesn't work. I would think that calling .myPlugin on same DOM element would keep the value of amount but obviously I'm missing something important here. Would appreciate any help and explanation.

(function($)
    {
        $.fn.myPlugin=function(options) {


            // default settings

            var settings = $.extend( {
                'editable': true                
            }, options);

            return this.each(function() 
            {
                var amount=0;

                switch(options)
                {
                    case "set10":
                        set10();
                }

                var t=$(this);

                function set10()
                {           
                    amount=10;
                }

                t.on("click", function(e) 
                {
                    console.log(amount);
                });

            });
        };

    })(jQuery)

    $("#someField").myPlugin({'editable':true});
    $("#someField").myPlugin("set10");

EDIT:

After having a closer look at various pattern I put together something that seems to work. It follows pretty much what you described but please let me know if there is anything horribly wrong with my approach. Basically it attaches data I need to the HTML element itself via jQuerys data method. Then when function is called it checks if options are actually a string and calls appropriate method withthin context of that particular DOM element we currently have in each loop. Is this simplified version of how public method are implemented? Like I said it works in my plugin however I would like to do it properly and afraid there is still some problem with my aproach.

(function($)
{
    $.fn.myPlugin=function(options) {

        // default settings

        var settings = $.extend( {
            'editable': true                
        }, options);

        return this.each(function() 
        {
            if(typeof options == 'string')
            {
                switch(options)
                {
                    case "set10":
                    {
                        set10.call(this);
                        return;
                    }
                }
            }

            var amount=0;

            var t=$(this);

            function set10()
            {           
                var t=$(this);

                amount=10;

                $.data(t[0],"amount",amount);
            }

            t.on("click", function(e) 
            {
                if($.data(t[0],"amount"))
                    amount = $.data(t[0],"amount",amount);
                console.log(amount);
            });

        });
    };

})(jQuery)

score 0 · Answer 1 · answered Jun 13 '13 at 08:39

By default Jquery plug-ins do not stay persistent with every call. What you're doing here is re-initializing the entire plug-in twice, and each declaration is a completely new object that is not aware of any previous declarations.

I'm afraid you may need to re-think your solution completely if you want to do this as a JQuery plug-in. Generally speaking external functions are triggered by callbacks passed as options and/or events. You can also pass data between DOM elements using the .data() function (which creates data-whatever attributes on the dom object itself).

Simple public function in simple jQuery plugin

1 Answers1