javascript - 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 就绪处理程序中添加脚本

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()); 
    });