Script only works in console

Question

I recently started to learn jQuery so I had some exercices to do. This one is about displaying messages by clicking on page element. Here is the code :

var $caption = $('caption');

$caption.on('click', function(event) {

    $(' <td>Wp it worked</td>').insertAfter('tr');

});

<!DOCTYPE html>

    <html>

        <head>

            <title>Happy Birthday !</title>

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

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

            <link rel="stylesheet" type="text/css" href="css/style.css">

            <meta charset="utf-8">

        </head>

        <body>

                <table>

                    <caption>Click here</caption>

                        <tr>

 

                        </tr>

                </table>

        </body>

    </html>

So the problem is that it doesn't work. When I write the script in the console it works perfectly, but with the js file it basicly doesn't. So I know it's not a problem of folder because when I put something like alert('test'); in the js file it works. Someone knows why ?

Move the `script` tag to the end of `` element or wrap the code in `ready()` as shown in the answers of the linked question. — Tushar, May 10 '18 at 09:47

score 0 · Accepted Answer · answered May 10 '18 at 09:50

0

it is working in the snippet , however you may try this.

$(document).ready(function () {
        var $caption = $('caption');

        $caption.on('click', function (event) {

            $(' <td>Wp it worked</td>').insertAfter('tr');

        });
    });

answered May 10 '18 at 09:50

Gagan Deep

1,508
9
13

I basically moved the – Let May 10 '18 at 16:14
Enclosing the code inside document.ready ensures that it doesn't execute before the page is fully rendered. – Gagan Deep May 10 '18 at 16:26

Script only works in console

1 Answers1