Cannot call extended method on JQuery object

Question

I have HTML something like the following:

<div id="quoteContainer">
    <div class="quote prototype"></div>
     <div class="quote live q0"></div>
     <div class="quote live q1"></div>
     <div class="quote live q2"></div>
     <div class="quote live q3"></div>
     ...
</div>

Where each of the live divs are coppies of the prototype div. Here is the code that makes the copy:

quote = $(".quote.prototype").clone().show()
        .removeClass("prototype").addClass("live")
        .addClass(foo)
        .appendTo("#quoteContainer");

$.extend(quote, QuoteCalculator);
quote.setQuoteClass(foo);

Foo is a variable that combines "q" and the number of quotes. The QuoteCalculator class has several methods which I want to call, including (ex.) shout(). Here is part of QuoteCalculator:

var QuoteCalculator = {
    ...

    shout: function() {
        console.log("hello from calculator");
    },

    ...
};

At another point in the program, I want to call the shout method. Here is my code:

$(".quote.live").each(function() {
      this.shout();
});

Here is what firebug says: this.shout is not a function [Break On This Error] this.shout();

EDIT: Here is the weird part: calling quote.setQuoteClass(foo) does not generate an error. On the contrary, it works perfectly.

Why does the problem occur, what causes it, and how do I fix it?

JAAulde · Accepted Answer · 2011-07-21 19:08:38Z

3

Your extend:

$.extend(quote, QuoteCalculator);

is extending an instance of the jQuery function. It is not extending the jQuery prototype such that any new queries on elements that had been in the previous collection (quote) also get the methods.

$(".quote.live")

^^ that is a new query, resulting in a new instance of jQuery which is not connected to the instance you stored in quote which you extended.

You need to look into plugin authoring and how to extend the jQuery "class" (the prototype of the jQuery function) so that all instances of jQuery returned by the factory have the methods you want.

answered Jul 21, 2011 at 19:08

JAAulde

19.5k5 gold badges56 silver badges65 bronze badges

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

2 Comments

JAAulde Over a year ago

If I'm not quite right that you are wanting to extend the jQuery prototype, then I think nrabinowitz hit the nail on the head with his answer.

Daniel Kats Over a year ago

I think what I want to do is extend the DOM rather than the prototype.

nrabinowitz · Accepted Answer · 2011-07-21 19:10:28Z

2

It looks like you're expecting quote to be the DOM object - instead, it's a jQuery object referring to the DOM. Try this:

$.extend(quote.get(0), QuoteCalculator);

answered Jul 21, 2011 at 19:10

nrabinowitz

55.7k10 gold badges152 silver badges169 bronze badges

4 Comments

JAAulde Over a year ago

+1 I had not considered that possibility, but it makes sense as well. Either he is thinking he's extending the DOM element, or he thinks he's extending the jQuery prototype--neither of which is actually happening.

Daniel Kats Over a year ago

So the get would extend the DOM?

Daniel Kats Over a year ago

Thanks, I tried this and it solved the problem. +1 for being awesome.

JAAulde Over a year ago

That would extend the first DOM element matched by the selector used when quote was made.

Collectives™ on Stack Overflow

Cannot call extended method on JQuery object

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related