jQuery click event not working

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

Answer 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>

Answer 2

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>

jQuery click event not working

Question

2 answers

solution1
1 ACCPTED 2012-08-12 05:18:01

solution2
1 2012-08-12 05:22:03

jQuery click event not working

Question

2 answers

solution1 1 ACCPTED 2012-08-12 05:18:01

solution2 1 2012-08-12 05:22:03

solution1
1 ACCPTED 2012-08-12 05:18:01

solution2
1 2012-08-12 05:22:03