The approach to avoid including js file twice

Question

this is a simple html file:

<!DOCTYPE html>
<html>
   <head>
<title>Test Uploading Func.</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery-1.7.2.js">                  </script>        
<link type="text/css" href="jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
    <script type="text/javascript" src="jquery-ui-1.8.21.custom.min.js"></script>

        <!--Include js file-->
        <script type="text/javascript" src="upload.js" ></script>
</head>
<body>
    <button id="Upload" value="upload">upload</button>      
    <script type="text/javascript" src="upload.js" ></script>
</body>

And this is the js file I want to include:

$( '#Upload' ).bind('click', function(){
alert(">");
});

If I just include the js file in the beginning, the selector # can't know the id Upload so that I have to include it again at the end of the file... I do know it's not correct. But I don't know how to resolve it? Don't we just include all the js file within the tag head? What's the appropriate coding style I show have? Thanks.

UPDATE question!!!

If I have a lot of scenario like this, should I add "$(document).ready()" to all the functions? A little weird... Still another approach? Or web developers always do so.

And where should I include my js file? In the begin or the end?

If I include them all in the end, this kind of problem won't appear. Then why lots of people include the js file just in the start?

score 2 · Accepted Answer · edited May 23 '17 at 12:12

2

Wait for the DOM to be ready before selecting elements:

$(document).ready(function () {
    $( '#Upload' ).bind('click', function(){
        alert(">");
    });
});

Update:

You should always use $(document).ready(...) if you are manipulating elements that you expect to be on the page when your code runs. This is especially important if your code is in the <head></head> of the document.

You are not required to use $(document).ready(...) if your code is inside the </body> tag, but be aware that there are differences between the two.

edited May 23 '17 at 12:12

Community

1
1

answered Sep 16 '12 at 13:06

Andrew Whitaker

124,656
32
289
307

@Stallman: I updated my answer, I hope that helps. Let me know if you need more clarification – Andrew Whitaker Sep 16 '12 at 17:57
Do you mean that we should always use $(document).ready(...) in js file, including the file within the tag head ? – Alston Sep 17 '12 at 05:26
Yes, if you are accessing elements in the DOM. the JavaScript in the `head` will run before the rest of the page is parsed by the browser. That's why you have to wait for the `ready` event to fire. – Andrew Whitaker Sep 17 '12 at 12:47
Thank u! The links do help me a lot. – Alston Sep 18 '12 at 02:35
Any script that falls after the referenced element's closing tag should work. I'm not aware of exceptions to this. I don't typically use doc ready or window load when I can put all my scripts at the bottom. I think even HTML and body are safe to access if you know there's no followup HTML after your scripts. – Erik Reppen Oct 16 '13 at 16:14

score 1 · Answer 2 · answered Sep 16 '12 at 13:05

1

Why not check for $(document).ready() and include only once:

$(document).ready(function() {
    $( '#Upload' ).bind('click', function(){
        alert(">");
    });
});

answered Sep 16 '12 at 13:05

Mihai Iorga

39,330
16
106
107

score 1 · Answer 3 · answered Oct 16 '13 at 16:17

It's generally considered better practice to put all scripts at the bottom of the body tag like that. The only time I don't typically is for specialized scripts that need to be at the top like HTML5 shiv or certain analytics scripts.

The main reason for this is that script interpretation pauses the HTML/CSS rendering which can actually reduce perceived load-time performance.

The side-benefit is that you don't typically have to be bothered with DOM ready events since you can be certain HTML is 'ready' when your script is firing below the referenced element.

score 0 · Answer 4 · answered Sep 16 '12 at 13:49

If you use jQuery, you should always place it in
$(document).ready(function(){ ... code here ... });
or
$(function(){ ... code here ... })
if you don't know if elements you're reffering to have been loaded yet. This way you make sure, that everything will work as you expect. There are another issues with this functions, but this is most significant.

The approach to avoid including js file twice

4 Answers4