Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery - is not a function error

Here is my code:

(function($){     $.fn.pluginbutton = function (options) {         myoptions = $.extend({ left: true });         return this.each(function () {             var focus = false;             if (focus === false) {                 this.hover(function () {                     this.animate({ backgroundPosition: "0 -30px" }, { duration: 0 });                     this.removeClass('VBfocus').addClass('VBHover');                 }, function () {                     this.animate({ backgroundPosition: "0 0" }, { duration: 0 });                     this.removeClass('VBfocus').removeClass('VBHover');                 });             }             this.mousedown(function () {                 focus = true                 this.animate({ backgroundPosition: "0 30px" }, { duration: 0 });                 this.addClass('VBfocus').removeClass('VBHover');             }, function () {                 focus = false;                 this.animate({ backgroundPosition: "0 0" }, { duration: 0 });                 this.removeClass('VBfocus').addClass('VBHover');             });         });     } });   $(document).ready(function () {     $('.smallTabsHeader a').pluginbutton(); }); 

It gives me an error. What's wrong?

like image 530
Phil Jackson Avatar asked May 24 '11 11:05

Phil Jackson


People also ask

How do I fix error not function?

The TypeError: "x" is not a function can be fixed using the following suggestions: Paying attention to detail in code and minimizing typos. Importing the correct and relevant script libraries used in code. Making sure the called property of an object is actually a function.

Is not a function JS error?

This is a standard JavaScript error when trying to call a function before it is defined. This error occurs if you try to execute a function that is not initialized or is not initialized correctly. This means that the expression did not return a function object.

Is not a function console error?

In short, the "is not a function" error means that the value you're trying to invoke is not a function. The most common reasons this error occurs are: defining a variable with the same name that shadows the original object. calling a method on a value of a different type, e.g. calling the Array.

Is not a function $( document .ready function ()?

ready is not a function" error occurs for multiple reasons: Placing second set of parenthesis after the call to the ready() method. Loading the jQuery library after running your JavaScript code. Forgetting to load the jQuery library.


1 Answers

This problem is "best" solved by using an anonymous function to pass-in the jQuery object thusly:

The Anonymous Function Looks Like:

<script type="text/javascript">     (function($) {         // You pass-in jQuery and then alias it with the $-sign         // So your internal code doesn't change     })(jQuery); </script> 

This is JavaScript's method of implementing (poor man's) 'Dependency Injection' when used alongside things like the 'Module Pattern'.

So Your Code Would Look Like:
Of course, you might want to make some changes to your internal code now, but you get the idea.

<script type="text/javascript">     (function($) {         $.fn.pluginbutton = function(options) {             myoptions = $.extend({ left: true });             return this.each(function() {                 var focus = false;                 if (focus === false) {                     this.hover(function() {                         this.animate({ backgroundPosition: "0 -30px" }, { duration: 0 });                         this.removeClass('VBfocus').addClass('VBHover');                     }, function() {                         this.animate({ backgroundPosition: "0 0" }, { duration: 0 });                         this.removeClass('VBfocus').removeClass('VBHover');                     });                 }                 this.mousedown(function() {                     focus = true                     this.animate({ backgroundPosition: "0 30px" }, { duration: 0 });                     this.addClass('VBfocus').removeClass('VBHover');                 }, function() {                     focus = false;                     this.animate({ backgroundPosition: "0 0" }, { duration: 0 });                     this.removeClass('VBfocus').addClass('VBHover');                 });             });         }     })(jQuery); </script> 
like image 108
Prisoner ZERO Avatar answered Sep 27 '22 21:09

Prisoner ZERO