Question

I just created my first jQuery plugin , it is very simple it slideToggle two Divs , the code works fine and it do what i want , the problem is that i get an ERROR message at the console saying :

Uncaught TypeError: object is not a function  

it refer to this line of code

})(jQuery);

CODE

   $(function($) {
            $.fn.toggleDiv = function(opt) {
                var options = $.extend({}, $.fn.toggleDiv.objectOptions, opt);
                return this.each(function() {
                    if (options.animation == true) {
                        $(this).slideToggle();

                    } else {
                        $(this).toggle();

                    }
                });
            };

            $.fn.toggleDiv.objectOptions = {
                animation: false
            };
            $("button").click(function() { $("#Div1, #Div2")
             .toggleDiv({animation : fa}); return false; });
        })(jQuery);  

Does any one know what is that error and how can i fix it thanks

Answer 1

You either want to do

(function ($) { ... })(jQuery);

if you want your code to be run immediatly,

or

jQuery(function ($) { .... });

for your code to be run on document-ready.

You are referring to $(“button”), and therefore need the document tree to be available. So use the second version. A even nicer solution would be to use the jQuery function “delegate”, this would look something like this:

jQuery(function ($) {
    $(document).delegate("button", "click", function (ev) { ... });
});