1

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?

3

4 Answers 4

2

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/

0
1

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.

0

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>
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');
})
1
  • 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. Apr 3, 2018 at 20:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.