Load my Javascript after jQuery

Question

I'm new to this, but I did a lot of searching and couldn't find an answer about why my script wasn't loading after jQuery. I was receiving an error:

$ is not defined

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery-3.2.1.min.js"></script>
<script>
  $(document).ready(function() {
    $('#nav li').hover(function() {
      $('ul', this).show();
    }, function() {
      $('ul', this).hide();
    });
  });
</script>

Given your example, your code is already loading after jQuery - although you're including the same jQuery library twice. One local copy, one remote. I'd strongly suggest you remove one. Did you have a specific error with the code? If so, please check the console and edit it in to the question. Also note that JS is not required for hover effects; CSS is much more appropriate. — Rory McCrossan, Oct 17 '17 at 16:08
Thanks for editing. Given the error of `$ is not defined`, that means that jQuery is not included in the page properly. You most likely need to remove the second `script` tag. — Rory McCrossan, Oct 17 '17 at 16:11

score 0 · Answer 1 · answered Oct 17 '17 at 16:19

0

try this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
alert("hello"); //your script here
});
</script>

answered Oct 17 '17 at 16:19

MagentoDeveloper

1

"Try this" and code only answers are discouraged. Please _explain_ how your code fixes the problem. – M. Davis Oct 17 '17 at 16:26
just deleting the second ligne :) – MagentoDeveloper Oct 17 '17 at 16:51

score 0 · Answer 2 · answered Oct 17 '17 at 16:24

Loading JavaScript is Synchronous by default unless you tell the browser to handle it in a different way. Based on that, placing your script after including jQuery will ensure your script executed after jQuery is available

So for your code to work, do something like:

console.log('$ is ', typeof $)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Load my Javascript after jQuery

2 Answers2