admin管理员组

文章数量:1277340

I am trying a simple demo with requirejs and jquery for AMD. Following is my folder structure structure:

├── index.html
└── js
    ├── lib
    │   ├── jquery.js
    │   └── require.js
    └── main.js

in my index.html file i have the following content:

  <head>
    <script data-main="js/main" src="js/lib/require.js"></script>
  </head>

  <body>
    <div id="hello">    </div>

  </body>

and my main.js file looks like this:

define(['lib/jquery'], function ($) {

  $("#hello").html("Wow this works!");

});

But when i do, i get an error: Uncaught TypeError: undefined is not a function in main.js line 3.

What is wrong? I can't understand?

I am trying a simple demo with requirejs and jquery for AMD. Following is my folder structure structure:

├── index.html
└── js
    ├── lib
    │   ├── jquery.js
    │   └── require.js
    └── main.js

in my index.html file i have the following content:

  <head>
    <script data-main="js/main" src="js/lib/require.js"></script>
  </head>

  <body>
    <div id="hello">    </div>

  </body>

and my main.js file looks like this:

define(['lib/jquery'], function ($) {

  $("#hello").html("Wow this works!");

});

But when i do, i get an error: Uncaught TypeError: undefined is not a function in main.js line 3.

What is wrong? I can't understand?

Share Improve this question asked Oct 19, 2012 at 23:38 whatfwhatf 6,46815 gold badges52 silver badges80 bronze badges 4
  • Have you define to call sjuery library? on your html just call require.js – Habibillah Commented Oct 19, 2012 at 23:43
  • Is it possible that #hello does not exist at the time of script execution? – MasterAM Commented Oct 19, 2012 at 23:44
  • i tried this as well: require(['lib/jquery'], function ($) { $(function(){ $("#hello").text("Wow this works!"); }); }); This also gives same error. – whatf Commented Oct 19, 2012 at 23:49
  • Have you taken a look at this answer to a similar question? – pje Commented Nov 6, 2012 at 20:58
Add a ment  | 

3 Answers 3

Reset to default 5

Read this issue: https://github./jrburke/requirejs/issues/435

My understanding is this is because of how jquery defines itself. It is using a named define call:

define( "jquery", [], function () { return jQuery; } );

So now, if you require 'lib/jquery' it won't work. You have to exactly require 'jquery' for it to work.

EDIT:

If you want to put jquery in lib/ folder and your base url to be the parent folder of lib/ (lib/../) you can use a shim like this:

requirejs.config({
  baseUrl: 'js',
  shim: {
    'lib/backbone': {
      deps: ['lib/underscore', 'lib/jquery'],
      exports: 'Backbone'
    },
    'lib/underscore': {
      exports: '_'
    },
    'lib/jquery': {
      exports: '$'
    }
  }
});

requirejs(['lib/jquery'], function($) {
  // use $
});

I have tried your example without "$" in first line of main.js and it worked properly.

Fixed main.js:

define(['lib/jquery'], function () {
     $("#hello").html("Wow this works!");
});
<script data-main="js" src="js/lib/require.js"></script>
<script src="js/main.js"></script>

is what you want. the data-main attribute just points to what should be the root of relative request for it. So you'll need to load in main directly or through an script tag or a require() call in an inline script block

本文标签: javascriptGetting Error with loading of requirejs and jqueryStack Overflow