jQuery click event syntax

Question

The below code works well on localhost using XAMPP. But it doesn't work on another server.

<!DOCTYPE html>
<html>
    <head>
        <script src="jquery-latest.js"></script>
    </head>
    <body>
        word: <input type="text" id="sub" />
        user: <input type="text" id="user" />

        <button type="button" id="btn">Click Me!</button>

        <script>
            $("#btn").click(function () {
                var word=$("#sub").val();
                var usr=$("#user").val();
                alert("hi");
            });
        </script>
    </body>
</html>

I have got 2 errors from Chrome inspect element:

Uncaught SyntaxError: Unexpected end of input jquery-latest.js:5669
Uncaught ReferenceError: $ is not defined

Do you have a copy of "jquery-latest.js" in the same folder of your html file? — davidbuzatto
– davidbuzatto, Commented Aug 12, 2012 at 5:14
sure..that file is there, I checked that first :) Some other problems i think — Jaison Thomas
– Jaison Thomas, Commented Aug 12, 2012 at 5:15
Try using the webkit inspector or Firefox's firebug tools to see if the jQuery javascript file is being loaded. One important thing to note is that Windows filesystems are case-insensitive, but most Linux file systems are case-sensitive, so check the jquery-latest.js file is the correct case. — jstr
– jstr, Commented Aug 12, 2012 at 5:17
@Strelok and davidbuzatto: - use of document ready is unnecessary when the code is in a script block at the end of the body: the script will be executed after any elements before it are already parsed. — nnnnnn
– nnnnnn, Commented Aug 12, 2012 at 5:21

nnnnnn · Accepted Answer · 2012-08-12 05:30:19Z

1

check jquery-latest.js is same directory with html file. Otherwise code is ok and also works. add type in the script. try this

<script type="text/javascript" src="jquery-latest.js"></script>

edited Aug 12, 2012 at 5:30

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

answered Aug 12, 2012 at 5:18

Sad Al Abdullah

3792 silver badges8 bronze badges

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

2 Comments

Jaison Thomas Over a year ago

Uncaught SyntaxError: Unexpected end of input jquery-latest.js:5669 Uncaught ReferenceError: $ is not defined

Eugene Naydenov Over a year ago

Also you can include jQuery from some jQuery CDN: docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery

Strelok · Accepted Answer · 2012-08-12 05:22:03Z

1

You need to wire up the click handler in the $(document).ready() event.

<!DOCTYPE html>
<html>
    <head>
        <script src="jquery-latest.js"></script>
        <script>
        $(document).ready(function() {
            $("#btn").click(function () {
                var word=$("#sub").val();
                var usr=$("#user").val();
                alert("hi");
            });
        });
        </script>
    </head>
    <body>
        word: <input type="text" id="sub" />
        user: <input type="text" id="user" />

        <button type="button" id="btn">Click Me!</button>
    </body>
</html>

answered Aug 12, 2012 at 5:22

Strelok

51.7k9 gold badges106 silver badges118 bronze badges

3 Comments

nnnnnn Over a year ago

No you don't. The browser basically parses the document top to bottom, and script blocks can access elements above them since those elements have already been parsed and added to the DOM. In the OP's code the script block is at the end of the body, so all elements should be accessible from the code.

Eugene Naydenov Over a year ago

The scripts in head tag slows down the page rendering so it's better to place scripts at the end of body if possible.

ColBeseder Over a year ago

@Jaison What was the solution?

Collectives™ on Stack Overflow

jQuery click event syntax

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