jQuery not working with RequireJS when in subfolder

Question

I have the following folder structure:

• index.html
• js/
  • libs/
    • require.js
    • jquery.js
  • main.js

In index.html I added the following line to the head section:

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

When I add a simple alert to main.js, it works. When I want to use jQuery, it's not working:

require(['libs/jquery'], function ($) {
    $('#test').html('123');
});

In the chrome web inspector, I see that jquery loaded succesfully, but the text doesn't appear in my div. When I move jquery out of ./js/libs and just put it in ./js (and ofcourse change the dependency to ['jquery']), it works.

What am I doing wrong? Why can't I just put jquery in ./js/libs to keep things organized?

Thanks

Answer 1

If I configure a path

require.config({
    paths: {
        'jquery': 'libs/jquery'
    }
});

and change the require to:

require(['jquery'], function ($) {
    $('#test').html('123');
});

it appears to be working. If someone could explain me why.