jquery - Uncaught Type Error: Undefined is not a function JavaScript Module - Stack Overflow

admin管理员组

文章数量:1345289

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

Share Improve this question Follow edited Nov 15, 2016 at 13:30 Aruna 12k33 gold badges3030 silver badges4242 bronze badges asked Jan 23, 2014 at 2:00 MddMdd 4,4301212 gold badges4848 silver badges7171 bronze badges 5

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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.

本文标签： jqueryUncaught Type Error Undefined is not a function JavaScript ModuleStack Overflow