JavaScript / jQuery事件未触发

Question

我的代码中可能有用的某些部分：在“ 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是2.0.3版和Bootstrap 2.3.2版）

在“ contact.js”中

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

看起来很简单，但是我不太习惯JavaScript，无法弄清为什么在输入时无法触发该事件。

Answer 1

看起来脚本不在dom准备就绪处理程序中，因此执行脚本时，该元素可能不存在于dom结构中，这可能是原因

您需要在dom ready处理程序中添加脚本

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

Answer 2

不建议使用bind 。 尝试on ：

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

如果将事件委托给文档，则该方法无需等待DOM加载即可工作。 或者，您可以等待@Arun P Johny指出的DOM完全加载，然后使用直接事件：

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