Why does this jQuery event listener not work?

Question

I'm trying to setup an event listener in jQuery but can't seem to get it to work. Any tips/hints as to what I'm doing wrong would be greatly appreciated. Here is the code:

<script>
$('.send').on('click', function() {
    console.log('message sent');
    var text = $('.draft').val();
    Chat.send(text); 
});
</script>
<input class="draft" type="text"/> <button class="send">Send</button>

-EDIT-

When I say it doesn't work, I mean that the event handler doesn't seem to be running (console doesn't show anything when I hit the send button).

Answer 1

In your HTML you have input

<input class="draft" type="text"/>

and here in jQuery, you are doing wrong text();

 var text = $('.draft').text();

it should be val();

 var text = $('.draft').val();

Fiddle

Edit:

Make your script DOM ready

//jQuery Library Always comes FIRST
<script>
$(document).ready(function() {
    $('.send').on('click', function() {
        console.log('message sent');
        var text = $('.draft').val();
        Chat.send(text); 
    });
});
</script>

<input class="draft" type="text"/>
<button class="send">Send</button>

Answer 2

<input class="draft" type="text"/> <button class="send">Send</button>
<script>
    $('.send').on('click', function() {
        console.log('message sent');
        var text = $('.draft').val();
        console.log(text);
        //Chat.send(text);
    });
</script>

Answer 3

Event handler should be on '.send' button if you are expecting it to console when you click the button. $('.send').on('click', function(){});