jQuery click not working but jquery loaded

Question

I don`t understand why this jQuery script not works;

$( "#send" ).click(function() {
    console.log("ee");
});

console.log("test");

When I load the page I see 'test' in the console, so the jQuery page is loaded. But when I click on #send it won`t work?

<!DOCTYPE html>
<html>
    <head>
        <title>Chat-o-matic</title>
        <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js" type="text/javascript"></script>
        <script src="//code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
        <script src="chat.js" type="text/javascript" type="text/javascript"></script>
        <link href="chat.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
        <div id="container">
            <h1>Chat-o-matic</h1>
            <div id="round">
                <p>Om de chat te joinen, typ een chatnaam in</p>
                <input type="text" id="chatname" placeholder="Typ hier je chatnaam in...">
                <button id="send">Join de chat</button>
            </div>
        </div>
    </body>
</html>

So, does somebody know why this not works and how to fix it?

Have you binded events in [document-ready handler](http://api.jquery.com/ready/)? — Satpal, Jan 26 '14 at 10:23
possible duplicate of [Simple jQuery click not working](http://stackoverflow.com/questions/8716655/simple-jquery-click-not-working) — undefined, Jan 26 '14 at 10:25

score 2 · Accepted Answer · answered Jan 26 '14 at 10:23

Wrap the code within $(document).ready(function(){........});

$(document).ready(function(){
    $( "#send" ).click(function() {
        console.log("ee");
    });    
});

To bind event after dom element is loaded

http://learn.jquery.com/using-jquery-core/document-ready/

score 1 · Answer 2 · answered Jan 26 '14 at 10:28

Your first piece of javascript should be wrapped in a document.ready function.

$(document).ready(function(){ 
    $( "#send" ).click(function() {
        console.log("ee");
        alert("This works!");
    });
    console.log("test");
});

Hope this helps.

score 0 · Answer 3 · answered Jan 26 '14 at 10:29

Try With this.

<!DOCTYPE html>
<html>
    <head>
        <title>Chat-o-matic</title>
        <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js" type="text/javascript"></script>
        <script src="//code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
        <script src="chat.js" type="text/javascript" type="text/javascript"></script>
        <link href="chat.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            $(document).ready(function(){
                $( "#send" ).click(function() {
                  console.log("ee");
                });

                 console.log("test");
            });
        </script>
    </head>

    <body>
        <div id="container">
            <h1>Chat-o-matic</h1>
            <div id="round">
                <p>Om de chat te joinen, typ een chatnaam in</p>
                <input type="text" id="chatname" placeholder="Typ hier je chatnaam in...">
                <button id="send">Join de chat</button>
            </div>
        </div>
    </body>
</html>

score 0 · Answer 4 · edited Apr 03 '18 at 22:27

0

Event Delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

So change your click event to the following

$('#container').on('click', '#send', function() {
    console.log('eee');
})

edited Apr 03 '18 at 22:27

Reborn

19,713
8
36
61

answered Apr 03 '18 at 19:39

Ozal Zarbaliyev

371
3
14

1

Don't just blurt out code. Add some text around it to explain how it solves the OP's issue. This will help to improve the long term value of the answer. – NightOwl888 Apr 03 '18 at 20:05

jQuery click not working but jquery loaded

4 Answers4