jquery not working inside html file

Question

I'm trying to do a very basic jquery tutorial but I'm not able to get it to work. I'm calling the jquery library from google and then I try to create a script inside html.

If I do the same in a .js file I wouldn't have any problem. What am I missing here?

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    </head>
    <body>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">
            $(document).ready(function() {
                $("a").click(function() {
                    alert("Hello world!");
                });
            });
        </script>
            <a href="">Link</a>

    </body>
</html>

Matt Howell · Accepted Answer · 2011-02-18 07:34:40Z

12

You need to split this up:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">
    $(document).ready(function() {
        $("a").click(function() {
            alert("Hello world!");
        });
    });
</script>

...into two script elements:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("a").click(function() {
            alert("Hello world!");
        });
    });
</script>

In the snippet you gave, the code within the <script> element won't be evaluated because the browser is only evaluating the contents from the src attribute and ignoring everything else.

answered Feb 18, 2011 at 7:34

Matt Howell

16k7 gold badges51 silver badges57 bronze badges

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

2 Comments

Nicolas de Fontenay Over a year ago

The amount of time I've spent on something so dumb is insane. I never thought it required 2 elements. Thanks a lot.

Matt Howell Over a year ago

No problem. We've all been there. :)

toddles2000 · Accepted Answer · 2011-02-18 07:39:36Z

1

Move your scripts into the head element like this:

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("a").click(function () {
                alert("Hello world!");
            }); 
        });
    </script>
</head>
<body>    
    <a href="#">Link</a>
</body>
</html>

answered Feb 18, 2011 at 7:39

toddles2000

1,1321 gold badge8 silver badges16 bronze badges

Collectives™ on Stack Overflow

jquery not working inside html file

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related