Uncaught TypeError: undefined is not a function on

问题:

I'm building a normal webpage which requires me to load about five CSS files and ten Javascript files.

• When loading them separately in the HTML page, my webpage loads fine.

• Now for production, I concatenated all the Javascript into a single file, in the order needed, and all the CSS into another file. But when I try to run the web page with the concatenated files it throws an error saying:

  Uncaught TypeError: undefined is not a function

On the line where jquery.min.js is being loaded in the concatenated Javascript file.

What can I do to mitigate this? I want to concatenate all files and minify them for production. Please help.

EDIT: I merged the Javascript and CSS in the order they were when they were being loaded individually and were working fine.

回答1:

Assuming this problem still has not be resolved, a lot of individual files don't end their code with a semicolon. Most jQuery scripts end with (jQuery) and you need to have (jQuery);.

As separate files the script will load just fine but as one individual file you need the semicolons.

回答2:

You might have to re-check the order in which you are merging the files, it should be something like:

1. jquery.min.js
2. jquery-ui.js
3. any third party plugins you loading
4. your custom JS

回答3:

This solution worked for me

    ;(function($){
        // your code
    })(jQuery);

Move your code inside the closure and use $ instead of jQuery

I found the above solution in https://magento.stackexchange.com/questions/33348/uncaught-typeerror-undefined-is-not-a-function-when-using-a-jquery-plugin-in-ma

after seraching too much

回答4:

I got the same error from having two references to different versions of jQuery.

In my master page:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

And also on the page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>

回答5:

I had this problem recently with the jQuery Validation plug-in, using Squishit, also getting the js error:

"undefined is not a function"

I fixed it by changing the reference to the unminified jquery.validate.js file, rather than jquery.validate.min.js.

@MvcHtmlString.Create(
    @SquishIt.Framework.Bundle.JavaScript()
        .Add("~/Scripts/Libraries/jquery-1.8.2.min.js")
        .Add("~/Scripts/Libraries/jquery-ui-1.9.1.custom.min.js")
        .Add("~/Scripts/Libraries/jquery.unobtrusive-ajax.min.js")
        .Add("~/Scripts/Libraries/jquery.validate.js")
        .Add("~/Scripts/Libraries/jquery.validate.unobtrusive.js")
         ... more files

I think that the minified version of certain files, when further compressed using Squishit, for example, might in some cases not deal with missing semi-colons and the like, as @Dustin suggests, so you might have to experiment with which files you can doubly compress, and which you just leave to Squishit or whatever you're bundling with.

回答6:

For those out there who still couldn't fix this, I did so by changing my 'this' to '$(this)' when using jQuery.

E.G:

$('.icon').click(function() {
    this.fadeOut();
});

Fixed:

$('.icon').click(function() {
    $(this).fadeOut();
});

回答7:

I've run into the very same issue, when mistakenly named variable with the very same name, as function.

So this:

isLive = isLive(data);

failed, generating OP's mentioned error message.

Fix to this was as simple as changing above line to:

isItALive = isLive(data);

I don't know, how much does it helps in this situation, but I decided to put this answer for others looking for a solution for similar problems.

回答8:

Yes, i also I fixed it changing in the js libraries to the unminified.

For example, in the tag, change:

<script type="text/javascript" src="js/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.rcarousel.min.js"></script>

For:

<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.rcarousel.js"></script>

Quiting the 'min' as unminified.

Thanks for the idea.

回答9:

Remember: Javascript functions are CASE SENSITIVE.

I had a case where I'm pretty sure that my code would run smoothly. But still, got an error and I checked the Javascript console of Google Chrome to check what it is.

My error line is

opt.SetAttribute("value",values[a]);

And got the same error message:

Uncaught TypeError: undefined is not a function

Nothing seems wrong with the code above but it was not running. I troubleshoot for almost an hour and then compared it with my other running code. My error is that it was set to SetAttribute, which should be setAttribute.

回答10:

I just had the same message with the following code (in IcedCoffeeScript):

f = (err,cb) ->
  cb null, true

await f defer err, res
console.log err if err  

This seemed to me like regular ICS code. I unfolded the await-defer construct to regular CoffeeScript:

f (err,res) ->
  console.log err if err

What really happend was that I tried to pass 1 callback function( with 2 parameters ) to function f expecting two parameters, effectively not setting cb inside f, which the compiler correctly reported as undefined is not a function.

The mistake happened because I blindly pasted callback-style boilerplate code. f doesn't need an err parameter passed into it, thus should simply be:

f = (cb) ->
  cb null, true
f (err,res) ->
  console.log err if err

In the general case, I'd recommend to double-check function signatures and invocations for matching arities. The call-stack in the error message should be able to provide helpful hints.

In your special case, I recommend looking for function definitions appearing twice in the merged file, with different signatures, or assignments to global variables holding functions.

回答11:

Make sure you have commented out any commentaries. Sometimes when copying and pasting you will leave out the "/*!"

Also when you go into the console they will list your errors and you should take it one at a time. If you see "Uncaught SyntaxError: Unexpected token * " That might mean it is reading your js file and it isn't getting past the first line.

/*! * jquery.tools 1.1.2 - The missing UI library for the Web * * [tools.tabs-1.0.4, tools.tooltip-1.1.2, tools.scrollable-1.1.2, tools.overlay-1.1.2, tools.expose-1.0.5] * * Copyright (c) 2009 Tero Piirainen * http://flowplayer.org/tools/ * File generated: Wed Oct 07 09:40:16 GMT 2009 */

回答12:

In case there are any morons out there like me, I had this frustrating problem because I forgot a simple

new

keyword before instantiating a new object.

回答13:

I got this when I accidentally passed too many parameters into a jquery function that only expected one callback parameter.

For others troubleshooting: make sure you check all your jquery function calls for extra parameters.