jQuery not working in external JavaScript

Question

I am new to jQuery and am stuck at some strange issue. I am using jQuery's change and click methods. They are working fine when used in my HTML file in the <script> tag.

Like:

<script>
    $("select,input").change(function ()
    {
        // My code and some alerts
    });
</script>

When I copied the same in external JavaScript code without <script> and imported that in my HTML it was not at all working.

Are there any changes which are needed to use jQuery in external JavaScript code?

PS: Some other non-jQuery functions present in same external JavaScript code are successfully called from HTML.

Using <SCRIPT language="JavaScript" SRC="jscript/myExternalJs.js"></SCRIPT> — Ajinkya
– Ajinkya, Commented May 21, 2011 at 5:33

John Green · Accepted Answer · 2015-03-22 23:38:33Z

16

First off, you don't want a <script> tag in an external JavaScript file, if that's how I'm reading your post.

The trick with jQuery is that your code is set to execute immediately.

You want to wrap your script so that it loads when the document is ready, in something like:

$(document).ready(function(){
    $("select,input").change(function ()
    {
        // My code and some alerts
    })
});

And you want to make sure that your file is loaded after jQuery (otherwise the $ global will not be set).

Additions:

Here is what your HTML should look like:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="jscript/myExternalJs.js"></script>

Here is what your JavaScript code should look like (note there is no script tag inside the JavaScript file):

$(document).ready(function(){
    $("select,input").change(function ()
    {
        // My code and some alerts
    })
    // Other event handlers.
});

As far as your other script... it sort of depends on what you're doing. The most important thing is to not try to hook event listeners up to objects that don't yet exist, which is why we use document.ready.

edited Mar 22, 2015 at 23:38

answered May 21, 2011 at 5:32

John Green

13.5k3 gold badges31 silver badges52 bronze badges

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

6 Comments

Ajinkya Over a year ago

Yes I want to remove <script> tag from HTML file.So I need to add $(document).ready(fucntion(){...}). What if I have multiple methods ? Should I add them under $(document).ready(fucntion(){...}) ?

Ajinkya Over a year ago

What about other non jquery functions, should I add them under document.ready ?

John Green Over a year ago

You probably don't need to, no. Although it may be good practice, otherwise you're polluting the global namespace. But that's a different topic. Don't worry about it for now.

Ajinkya Over a year ago

@John: One question just out of curiosity. I tried loading external js (as it is without document.ready) after body tag and it also works. But I am wondering whether it is a good practice to load js at the end of page ?

John Green Over a year ago

A few years ago, everybody was recommending bottom of page, but that has somewhat subsided. You can do either, but I am of the school that believes that script belongs in the head of the document.

|

dtbarne · Accepted Answer · 2015-03-20 15:59:29Z

3

Did you make sure jquery is defined before your own jquery code?

You should also make sure the DOM is ready when dealing with jquery:

$(document).ready(function() {
    $("select,input").change(function() {
        // my code and some alerts
    });

    // more code here if needed, etc.
});

edited Mar 20, 2015 at 15:59

answered May 21, 2011 at 5:30

dtbarne

8,2505 gold badges47 silver badges49 bronze badges

4 Comments

Ajinkya Over a year ago

I just copied the same code as present in my HTML file to external js.And can you please tell me how to define jquery in external js ?

Ravi Parekh Over a year ago

@Ajinkya u dont't have to define in external JS but just link jquery.*.js to your HTML. it will automatically merged.

dtbarne Over a year ago

Don't define it in your external JS, put the <script src="..."> tag for jquery in your HTML, but make sure that it is logically instantiated before the javascript you posted.

Ajinkya Over a year ago

@Ravi,dtbarna: Thanks for suggestions, got it :) Added document.ready and it works.

Collectives™ on Stack Overflow

jQuery not working in external JavaScript

2 Answers 2

6 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related