Question

I’m working on a simple program that is built to teach you (me) how to write with the 8pen keyboard for Android.

On every keydown I check if the input value matches the “pattern-attribute” the html changes so that a new lesson comes up. This works fine. However when i update the keyup function stops triggering.

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]+'"/>')
}

Why?

Answer 1

Binding an event registers the event handler directly to a DOM element, in your case <input>. As you are updating the <input> whenever a keyup occurs, the event is no longer registered to that new element.

Rather than using .bind():

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

Use .on() which works with all elements added to the page after the event is registered:

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

See this excellent post for the differences between .bind() and .on()