JQuery does not run in .html file

Question

What am I doing wrong? I'm trying to get my jquery to show on my .html file, but it doesnt run!

<!DOCTYPE html>
<html>
<head>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(".mainNav a").hover(function() {
    $(this).parent().find(".subNav").slideDown('fast').show();
    $(this).parent().hover(function() {}, function() {
        $(this).parent().find(".subNav").slideUp('fast');
    });
}).hover(function() {
    $(this).addClass("subHover");
}, function() {
    $(this).removeClass("subHover");
});


</script>

Use document.ready for your jquery code. Currently jQuery might be loading later. — Saurabh Sharma
– Saurabh Sharma, Commented May 1, 2017 at 4:27
Where is HTML part? what you exactly trying to achieve? Wrap your code inside $(document).ready(function(){........//your code.....}); — Death-is-the-real-truth
– Death-is-the-real-truth, Commented May 1, 2017 at 4:27

Lekhnath · Accepted Answer · 2017-05-01 04:56:48Z

2

Make sure document is ready :

$(function() {
    //YOUR jQuery CODE GOES HERE
});

OR

Move your all scripts to the <body> of your html.

<body>

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

    $(".mainNav a").hover(function() {
        $(this).parent().find(".subNav").slideDown('fast').show();
        $(this).parent().hover(function() {}, function() {
            $(this).parent().find(".subNav").slideUp('fast');
        });
    }).hover(function() {
        $(this).addClass("subHover");
    }, function() {
        $(this).removeClass("subHover");
    });
</script>
</body>
</html>

edited May 1, 2017 at 4:56

answered May 1, 2017 at 4:28

Lekhnath

4,6456 gold badges39 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sam Santamaria Over a year ago

Ok, adding it is fairly ugly. Adding $(document).ready(function(){........//your code.....}); isn't working. It's at codepen.io/SalvatoreSantamaria/pen/gWWaJm

Lekhnath Over a year ago

Ugly?? And why is that? Your code is not participating in beauty contest, is it :) See the update for atlernative solution.

Lekhnath Over a year ago

In the codepen link you provided dropdown is working fine, what is not working for you?

Sam Santamaria Over a year ago

hey Lekhnath- the codepen works fine, I'm just trying to get it to work in an .html file. I still can't get it to work, even after adding the document ready or moving it to the body

Akhlesh · Accepted Answer · 2017-05-01 05:52:01Z

0

2 way you have to fixed

1.add script in head and use

<script src="source of jquery"></script>
<script>
$document.ready(function(){

some code jQuery

})
</script>

2.add script before </body> tag

<script src="source of jquery"></script> 
<script>

enter code here here

</script>

this time you don't need $document.ready() anymore

edited May 1, 2017 at 5:52

Akhlesh

2,3991 gold badge16 silver badges23 bronze badges

answered May 1, 2017 at 4:59

Shahriyar

236 bronze badges

1 Comment

Shahriyar Over a year ago

in way two before tag </body>

Collectives™ on Stack Overflow

JQuery does not run in .html file

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related