JavaScript / jQuery事件未触发

Question

Some parts of my code that could be useful: In 'index.php'

<link rel="stylesheet" href="/0/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="/0/0.css" />
<script src="/0/bootstrap/js/bootstrap.min.js"></script>
<script src="/0/js/jquery.min.js"></script>
<script src="contact.js"></script>
(...)
<input id="firstname" (...)"/>

(jQuery is version 2.0.3 and Bootstrap 2.3.2)

In 'contact.js'

$('#firstname').bind('keyup keypress change keydown oninput input', function(e) {
    alert('test');
    alert($(this).val()); 
});

It looks like something very simple but I'm not so use to JavaScript and can't find out why the event is not firing when I type in the input.

Answer 1

Looks like the script is not in a dom ready handler, so when the script is executed the element may not be present in the dom structure that could be the reason

You need to add the script in dom ready handler

jQuery(function(){
    $('#firstname').bind('keyup keypress change keydown oninput input', function(e) {
        alert('test');
        alert($(this).val()); 
    });
})

Answer 2

Using bind is not recommended. Try on :

$(document).on('keyup keypress change keydown oninput input','#firstname', function(e) {
    alert('test');
    alert($(this).val()); 
});

If you delegate the event to document, this should work without waiting for the DOM loaded. Or you could wait for the DOM fully loaded as pointed out by @Arun P Johny and use direct event:

$('#firstname').on('keyup keypress change keydown oninput input', function(e) {
        alert('test');
        alert($(this).val()); 
    });