javascript - 当我更新 HTML 时，Keydown 事件停止触发

Question

我正在开发一个简单的程序，旨在教您(我)如何使用适用于 Android 的 8pen 键盘书写。

在每次按键时，我检查输入值是否与 html 更改的“模式属性”相匹配，以便出现新类(class)。这很好用。然而，当我更新 keyup 函数时停止触发。

var lesson = 0;
$(document).ready(function() {
    new_lesson(lesson)
    lesson++
    //den här grejjen aktiverar inte på lektion 2
    $("input").keyup(function(event){
        var value = $(this).val();
        console.log(value)
        if (isValidInput ('input')) {
            new_lesson(lesson);
        }
    })
});

function isValidInput (input) {
    return $(input)[0].checkValidity();
}

function new_lesson(lesson_number){
    $('#form').html('<label>'+data[lesson_number]+'</label> <input type="text" pattern="'+data[lesson_number]+'"/>')
}

为什么？

Answer 1

绑定(bind)事件会将事件处理程序直接注册到 DOM 元素，在您的例子中为 <input> .当您更新 <input>每当发生 keyup 时，该事件就不再注册到该新元素。

而不是使用 .bind() :

$("input").keyup(function(event){

使用 .on()它适用于事件注册后添加到页面的所有元素:

$("input").on("keyup", function(event){

查看此 excellent post for the differences between .bind() and .on()