I am trying to pass a reference to a jQuery Object to a module and have been getting an error that says: Uncaught TypeError: undefined is not a function

I am working on a fiddle to try and understand this pattern that I saw, as well as to understand prototype and the new keyword.

I am not sure what is causing this error. Here's my HTML and JavaScript along with a fiddle.

Fiddle.

HTML:

<div class="js-container" data-options="true"></div>
<div class="js-container" data-options="false"></div>

JavaScript:

$('.js-container').each(function (i, element) {
    new MyClass($(element));
    console.log($(element));
});
var MyClass = (function ($element) {
    this.$element;
    console.log(this.$element);    
    this.init();    
    MyClass.prototype.init = function () {
        this.addText();        
        return this;
    };    
    MyClass.prototype.addText = function () {
        var optText = this.$element.attr('data-options');
        this.$element.text(optText);        
        return this;
    };    
}());

I am trying to learn to write more module with JavaScript. So please let me know if I have anything else that is incorrect. Thanks!

I am trying to pass a reference to a jQuery Object to a module and have been getting an error that says: Uncaught TypeError: undefined is not a function

I am working on a fiddle to try and understand this pattern that I saw, as well as to understand prototype and the new keyword.

I am not sure what is causing this error. Here's my HTML and JavaScript along with a fiddle.

Fiddle.

HTML:

<div class="js-container" data-options="true"></div>
<div class="js-container" data-options="false"></div>

JavaScript:

$('.js-container').each(function (i, element) {
    new MyClass($(element));
    console.log($(element));
});
var MyClass = (function ($element) {
    this.$element;
    console.log(this.$element);    
    this.init();    
    MyClass.prototype.init = function () {
        this.addText();        
        return this;
    };    
    MyClass.prototype.addText = function () {
        var optText = this.$element.attr('data-options');
        this.$element.text(optText);        
        return this;
    };    
}());

I am trying to learn to write more module with JavaScript. So please let me know if I have anything else that is incorrect. Thanks!

• javascript
• jquery

• 1 The function that has $element as argument is immediately executed, but you're not passing any arguments. And this.$element doesn't exist, thus undefined. You're mixing things up... – elclanrs Commented Jan 23, 2014 at 2:02
• 1 See here stackoverflow./questions/8228281/…, and here stackoverflow./questions/3127429/javascript-this-keyword – elclanrs Commented Jan 23, 2014 at 2:03
• 1 Hint: What is the value of MyClass? (The value is the result of invoking the anonymous function - note the () near the end.) – user2864740 Commented Jan 23, 2014 at 2:05
• THanks elclanrs and user2864740. I was thinking that it was because I was not passing any reference to the () near the end. But I was also thinking that invoking new MyClass($(element)) would pass the jQuery selector to MyClass. How would you pass the element to MyClass? The new keyword is something new that I'm trying to understand. – Mdd Commented Jan 23, 2014 at 2:10
• I editted my question to better explain what I'm trying to learn. I saw a pattern similar to what I posted and was trying to understand a few concepts that I've read about but have not practiced much. Such as the new keyword and prototype. – Mdd Commented Jan 23, 2014 at 2:23

3 Answers 3

You are defining MyClass after you run the code that uses MyClass. Also, stuffing your class into a variable rather than declaring it the "traditional" way causes some problems. Try this:

function MyClass ($element) {

  this.$element;
  console.log(this.$element);

  // more code...
}

$('.js-container').each(function (i, element) {
  new MyClass($(element));
  console.log($(element));
});

Also, move your MyClass.prototype. definitions out of the actual MyClass. Put them after.

For what it is worth, a lot of the time when I see this problem I find that I have inadvertently called a function before it was referenced in the html. For example, I just called a jquery method in a js file before I loaded my jquery files. Putting the jquery references further up on the page solved it.

None of the above answers worked for me. But of course, my problem was special. I was recycling an old project to make a new one and there was a method that made the class that I had forgotten about (and was passing in a string instead of a function), and the fact that it wasn't updated was giving me this error, even though I had the syntax elsewhere all correct.

Moral: if you try the above solutions and it still doesn't work, desk check and make sure everyplace where the surrounding method is called passes in the right parameters.