Jquery does not work in html file but works in .js file

Question

When I have test.js file and import the script with:

<script defer="defer" src="/js/test.js"></script>

everything works fine... but if I change the line above in html to:

<script defer="defer">
    $(document).ready(function () {
        $(".overviewPilotPortraitImage").click(function () {
            alert("Hello world!");
        });
    });
</script>

it doesn't work anymore. test.js contains exactly the same script as above, just without script tags.
Yes, I'm sure it's exactly the same.

Head tag with test.js file - WORKING:

<head>
<title>Placeholder - Overview</title>
<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<script defer="defer" src="/js/jquery-1.11.1.min.js"></script>
<script defer="defer" src="/js/bootstrap.min.js"></script>
<script defer="defer" src="/js/test.js"></script>
</head>

Head tag with script in html - NOT WORKING:

<head>
<title>Placeholder - Overview</title>
<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<script defer="defer" src="/js/jquery-1.11.1.min.js"></script>
<script defer="defer" src="/js/bootstrap.min.js"></script>
<script defer="defer">
    $(document).ready(function () {
        $(".overviewPilotPortraitImage").click(function () {
            alert("Hello world!");
        });
    });
</script>
</head>

First, I thought that the script is somehow loaded before the Jquery but it doesn't make sense since the file import works fine. Any ideas?

Try removing your defer attribute, it might be preventing the script from running. — user3310334
– user3310334, Commented Jan 10, 2015 at 16:50

Nicola Ferraro · Accepted Answer · 2015-01-10 16:52:42Z

6

That's because defer has effect only on external scripts. You can declare the attribuite defer for in-page scripts but it is not considered by the browser.

In your second example, your in-page code is executed immediately, while jquery is loaded after the page has finished loading. More here.

answered Jan 10, 2015 at 16:52

Nicola Ferraro

4,2196 gold badges32 silver badges61 bronze badges

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

2 Comments

Krystian Sikora Over a year ago

That's correct. I tried removing defer attribute from the html script alone but it didn't work. I had to remove defer from all the imports for it to work. Any idea on how to load the scripts during html parsing and executing them after the page is loaded without using defer?

user3310334 Over a year ago

@Sikor Yeah, check out my answer, use window.onload, although I think jQuery's .ready() function should do that for you anyway.

score 2 · Accepted Answer · 2015-01-10 17:02:26Z

2

Straight from w3schools (and MDN):

Note: The defer attribute is only for external scripts (should only be used if the src attribute is present).

So, basically, you cannot use your defer attribute without the external script.

Perhaps try adding a window.onload:

<script>
window.onload = function(){
    $(document).ready(function () {
        $(".overviewPilotPortraitImage").click(function () {
            alert("Hello world!");
        });
    });
}
</script>

And putting your script tag within the body rather than the head.

<body>
  <!--
    bla - bla - bla
  -->
  <script>
    // tags can go here
  </script>
</body>

edited Jan 10, 2015 at 17:02

answered Jan 10, 2015 at 16:56

user3310334

3 Comments

Krystian Sikora Over a year ago

It is xhtml so values are required.

Krystian Sikora Over a year ago

Adding window.onload made it work. After quick googling, jquery's .ready is executed as soon as the html ends parsing while window.onload is executed after all content has been loaded. So with window.onload I can keep defer on the other scripts. Thanks.

Krystian Sikora Over a year ago

I was doing some more testing before accepting the answer. So impatient :D

Collectives™ on Stack Overflow

Jquery does not work in html file but works in .js file

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related