jQuery error .apply( matched.elem, args ); undefined is not a function

If you’re having an error in your site/app that says that is undefined is not a function and the error happens on the row containing .apply( matched.elem, args ); (jquery.js:4676 for version 2.0.3). You can do the following 2 things to figure out the error:

0. You need Chrome Dev Tools
1. Enable async for your dev tools
2. See in the call stack which is your file that attached the event listener and more important – which event was the one that is currently being handled. Mind that the funciton that is attaching to the event causing the error is highly likely that is not the problematic one. Usualy the problematic event subscription is one that cannot be invoked so probably you won’t see it in the list.
3. Look through your site/app for attaching a handler to the problematic event that is not defined. Remember – the event is the important part, not the selector.

For example

function myHandler ( event ){ console.log( 'jquery rulez!' ); }

$( document ).on( 'change', '.otherInput', function() {
 console.log( 'Yeah!' );
});

$( document ).on( 'change', '.myInput', myHandlerFunction );

In this case the myHandlerFunction is not defined (maybe because we forgot to rename it). So on the change called it will give us the error that undefined is not a function.

It was really annoying trying to figure out what did just break since the problem will happen on every triggering of any change event in the document.

Cheers and follow me on twitter

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.