TypeError: undefined is not a function jQuery

Question

I'm new to jQuery and I can get it to sometimes work, however, for some reason, when I try to call a function, it gives me the title error, but if I do it in developer tools, it works fine.

http://jsfiddle.net/otanan/pmzzLo3e/#&togetherjs=AezijhfBrj

It seems to work fine when retrieving the classes from the DOM, but not when I call a function such as

.click(function() {});

Here's the code:

var downloads = $(".info"),
    className = "info_clicked";

for(var i in downloads)
{
    downloads[i].click(function()
    {
        if(!this.hasClass(className))
            this.addClass(className);
        else
            this.removeClass(className);
    });
}

Pay attention to what the error is saying. Consider this will result in the same error: ({}).foo(). So which property evaluates to undefined, and why? Debug/fix the issue locally. — user2864740
– user2864740, Commented Aug 19, 2014 at 3:01
You're trying to use jQuery methods on native DOM nodes, that's the issue — adeneo
– adeneo, Commented Aug 19, 2014 at 3:01
If you want to iterate over a set of matched elements, use $('.info').each. — user229044
– user229044 ♦, Commented Aug 19, 2014 at 3:02
Especially if you are new, please read the jQuery tutorial. I quote: "In addition to the event object, the event handling function also has access to the DOM element that the handler was bound to via the keyword this. To turn the DOM element into a jQuery object that we can use jQuery methods on, we simply do $( this ), often following this idiom: var element = $( this );" Also: learn.jquery.com/using-jquery-core/selecting-elements/… — Felix Kling
– Felix Kling, Commented Aug 19, 2014 at 3:04

Barmar · Accepted Answer · 2014-08-19 03:10:08Z

3

When you access a jQuery collection as an array, it returns the DOM elements, not jQuery objects. You should use .each() rather than for (i in downloads):

downloads.each(function() {
    $(this).click(function() {
        if (!$(this).hasClass(className)) {
            $(this).addClass(className);
        } else {
            $(this).removeClass(className);
        }
    });
});

You could also simplify the whole thing to:

downloads.click(function() {
    $(this).toggleClass(className);
});

Most jQuery methods automatically iterate over all the elements in a collection if it makes sense to do so (the notable exceptions are methods that return information from the element, like .text() or .val() -- they just use the first element). So you generally only have to iterate explicitly if you need to do different things for each element. This is one of the great conveniences of using jQuery rather than plain JS: you rarely have to write explicit iterations.

edited Aug 19, 2014 at 3:10

answered Aug 19, 2014 at 3:03

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

1 Comment

Otanan Over a year ago

Thank you so much! I was trying to get into jQuery with the bare essentials to optimize my little animation, but I should definitely pace myself more and be patient! I appreciate your patience for such a naive question and the cool little function at the end! Condensed my vanilla JavaScript from 30+ lines to <7 and it does a much better job at it!

James Hay · Accepted Answer · 2014-08-19 03:01:41Z

1

I think the issue is that you're attempting to call a jQuery function on an object that is no longer a jQuery object.

For example you're saying $(".info"). Which retrieves a single jQuery object. As soon as you index that object downloads[i] it is no longer a jQuery object, it is a plain HTML element and does not have a click function available.

What you really need to do is get the jQuery object for the indexed item:

var downloads = $(".info"),
className = "info_clicked";

for(var i = 0; i < downloads.length; i++)
{
    $(downloads[i]).click(function()
    {
        if(!this.hasClass(className))
            this.addClass(className);
        else
            this.removeClass(className);
    });
 }

answered Aug 19, 2014 at 3:01

James Hay

7,3656 gold badges35 silver badges59 bronze badges

Comments

Eric Freitas · Accepted Answer · 2014-08-19 03:03:05Z

0

try it:

$(downloads[i]).click(function(){ //...

answered Aug 19, 2014 at 3:03

Eric Freitas

9011 bronze badges

Collectives™ on Stack Overflow

TypeError: undefined is not a function jQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related