Keydown event stops triggering when I update HTML
<p>I'm working on a simple program that is built to teach you (me) how to write with the 8pen keyboard for Android.</p>

<p>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.</p>

<pre><code>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('&lt;label&gt;'+data[lesson_number]+'&lt;/label&gt; &lt;input type="text" pattern="'+data[lesson_number]+'"/&gt;')
}
</code></pre>

<p>Why?</p>
