External Js file cannot run Jquery

Question

My external js file (example.js):

alert("External js file has just been loaded !");

$("#start").click(function (e) {
    alert("Starting !");  
});

My HTML file has <script type="text/javascript" src="example.js"></script>. When I load the page, it alerts "External js file has just been loaded !", which means the js file is successfully loaded.

However, when I click to the Start button, it doesn't alert "Starting !".

When I insert content of example.js file to the html file, it can alert "Starting !":

<script>
    alert("External js file has just been loaded !");

    $("#start").click(function (e) {
        alert("Starting !");  
    });
</script>

How can I fix such a problem with the external js file?

Are you loading the example.js file before the #start element exists on the page? You should be loading the js file at the end of the page, or put the click handler within a document ready call. — j08691
– j08691, Commented Nov 21, 2015 at 16:34
Move <script type="text/javascript" src="example.js"></script> to right before </body>. — j08691
– j08691, Commented Nov 21, 2015 at 16:58

Achu · Accepted Answer · 2015-11-21 17:00:08Z

6

Make sure that you have injected your jquery script before your example.js.

For Example:

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="example.js"></script>

And check your console if you are getting any errors.

answered Nov 21, 2015 at 17:00

Achu

3646 silver badges19 bronze badges

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

Comments

guest271314 · Accepted Answer · 2015-11-21 16:51:01Z

2

Try loading "example.js" at .ready() using $.getScript()

$(function() {
  $.getScript("example.js")
})

answered Nov 21, 2015 at 16:51

guest271314

1

Comments

Berendschot · Accepted Answer · 2015-11-21 16:54:41Z

1

I've just tried this and everything seems to work fine.

$(document).ready(function() {

  $("#world-button").click(function() {
    alert("Hello World");
  });

});

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Demo</title>
</head>
<body>
  <button id="world-button">Hello World</button>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</body>
</html>

answered Nov 21, 2015 at 16:54

Berendschot

3,1232 gold badges24 silver badges45 bronze badges

1 Comment

Berendschot Over a year ago

Please note that I've embed the JQuery library just before </body>.

codingrose · Accepted Answer · 2015-11-21 16:33:50Z

0

It is happening because you have not written click event inside document.ready function. Events should be written when DOM is ready.

$(document).ready(function(){
  $("#start").click(function (e) {
    alert("Starting !");  
  });
});

You can find more details here: https://learn.jquery.com/using-jquery-core/document-ready/

answered Nov 21, 2015 at 16:33

codingrose

15.7k11 gold badges41 silver badges58 bronze badges

Collectives™ on Stack Overflow

External Js file cannot run Jquery

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related