JQuery - Object [object Object] has no method

Question

Hello I am facing this strange JQuery problem. My Js:

$("#flip-counter").centerH();
function centerH() {
var marginL = ( $(window).width() - $(this).width() ) / 2;
$(this).css("marginLeft",marginL+"px");
alert(marginL);
}

Getting this error:

Uncaught TypeError: Object [object Object] has no method 'centerH'         
(anonymous function) 

k jquery.js:2 
l.fireWith jquery.js:2 
p.extend.ready jquery.js:2
D jquery.js:2

jquery.js:2 is empty.

I would understand if none of the code would work but now everything works except that and I can't add any other function. I just keep getting the same error. All files are included properly and when I delete this piece of JS code, my code works like a charm.

Any suggestions?

Dávid Szabó · Accepted Answer · 2012-12-15 11:34:15Z

6

You need to extend the jquery,if you want to use the function with jquery objects.

$.fn.centerH = function() {
    var marginL = ( $(window).width() - $(this).width() ) / 2;
    $(this).css("marginLeft",marginL+"px");
    alert(marginL);
}

answered Dec 15, 2012 at 11:34

Dávid Szabó

2,2672 gold badges17 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

T.J. Crowder · Accepted Answer · 2012-12-15 11:33:39Z

3

This code:

$("#flip-counter").centerH()

...tries to get a property called centerH from the jQuery object returned by $("#flip-counter") and then call it as a function. So there has to be a centerH function on the object.

This code:

function centerH() {
var marginL = ( $(window).width() - $(this).width() ) / 2;
$(this).css("marginLeft",marginL+"px");
alert(marginL);
}

...creates a centerH function but does nothing whatsoever to add it to jQuery.

If you're trying to make a jQuery plug-in, you assign the function to $.fn:

$.fn.centerH = centerH;

Once you've done that, the $("#flip-counter").centerH() line will work. But note that in a jQuery plug-in function, this is not a DOM element (your $(this).css(...) code seems to be treating it as one). Within a jQuery plug-in function, this is the jQuery object on which the function was called (so this.css(...) instead).

answered Dec 15, 2012 at 11:33

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

2 Comments

Rokas Petrošius Over a year ago

I never really used this and done lots of JQuery before, this is not a plugin, just a function in js file which is used for frontend. Surpisingly, this does work like that just somehow doesnt return anything - alaerts 0, but maybe that is my problem, Thank you.

T.J. Crowder Over a year ago

@RokasPetrošius: If you're not doing a plugin, then $("#flip-counter").centerH() is not how you call it, and will give you exactly the error you describe. Of course, $("#flip-counter").click(centerH) or something would be a different story.

Justin Lucas · Accepted Answer · 2012-12-15 11:33:59Z

1

The centerH() function is in the global scope. But you're calling it from the $("#flip-counter") jQuery object.

If you want to make your own custom functions available to jQuery objects you would create it like this:

jQuery.fn.yourFunction = function() { 
    // do stuff
}

answered Dec 15, 2012 at 11:33

Justin Lucas

2,3111 gold badge14 silver badges22 bronze badges

1 Comment

Rokas Petrošius Over a year ago

Tried this, the result was the same.

WebStakker · Accepted Answer · 2012-12-15 11:33:40Z

0

You cannot add functions to JQuery like that. You will need to add it as a plugin using jQuery.fn.centerH

More info on:

http://docs.jquery.com/Plugins/Authoring

answered Dec 15, 2012 at 11:33

WebStakker

3102 silver badges9 bronze badges

Collectives™ on Stack Overflow

JQuery - Object [object Object] has no method

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related