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?

Answer 1

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);