Why the click function doesn't work in jQuery?

Question

I am trying to do something when I click on the div or class "c" but it seems that it does not work. any suggestion how I can fix it?

<html>

    <head>
        <title>My seconf jQuery practice</title>
        <style>
            .c {
                width: 100px;
                height:100px;
                border-radius: 50px;
                background-color: red;
            }
        </style>
    </head>

    <body>
        <div class="c"></div>
        <p>My text
            <script "type=text/javascript" src="jquery-min.js">
                $(".c").click(function() {
                    //$("p").html("my text has changed");
                    alert('hi');
                });
            </script>
    </body>

</html>

score 5 · Answer 1 · answered Oct 07 '15 at 20:16

5

Your script tags are wrong, should be as follows:

<script type="text/javascript"  src="jquery-min.js"></script>
<script type="text/javascript">
    $(".c").click(function() {
        //$("p").html("my text has changed");
        alert('hi');
    });
</script>

And you probably will have to add a slash to the src if you get a 404:

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

Note that you've written "type=text/javascript" and it should be type="text/javascript"

answered Oct 07 '15 at 20:16

taxicala

21,408
7
37
66

lots of different errors ;) Half my answer is your and like-wise +1 – NSjonas Oct 07 '15 at 20:22
Thanks taxicala, I fixed it by replacing type="text/javascript" but still does not work. – sadena Oct 09 '15 at 13:08
NSjonas , I know, I am new to this field. Hopefully I would learn fast and write a code with less errors – sadena Oct 09 '15 at 13:09

score 4 · Answer 2 · edited May 23 '17 at 11:52

4

It's likely that the content in your script tag is being ignored. Include JQuery and your content script separately.

        <script  type="text/javascript"  src="/jquery-min.js"></script>
        <script  type="text/javascript">
        $(function() {    
            $(".c").click(function()
            {
                //$("p").html("my text has changed");
                alert('hi');
            });
        });
        </script>

Also as mentioned below, you want to wait until the document ready event to try do anything against the dom.

edited May 23 '17 at 11:52

Community

1
1

answered Oct 07 '15 at 20:17

NSjonas

10,693
9
66
92

1

I deleted the ready() part, as noticed it's in the body tag rather than head, it may not be necessary. Please feel free to adjust your text. Apart from that it's also missing a tag, so many things :D – Stickers Oct 07 '15 at 20:28

score 0 · Answer 3 · answered Oct 07 '15 at 20:39

I fixed your code as below.

<html>
    <head>
        <title>My second jQuery practice</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <style>
                 .c{
                 width: 100px;
                 height:100px;
                 border-radius: 50px;
                 background-color: red;
                }
        </style>
        <script>
            $(document).ready(function() {
                $(".c").click(function() {
                    alert("You clicked on a div.");
                });
            });
        </script>
    </head>
    <body>
        <div class="c"></div>
        <p> My text </p>
    </body>
</html>

Might be good to explain what the issues where, so that the person that asked actually learns something. — taxicala, Oct 07 '15 at 20:46
Thank you. I changed the src from "jquery-min.js" to "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" and it works. — sadena, Oct 09 '15 at 13:11

Why the click function doesn't work in jQuery?

3 Answers3