Слушатель событий на присоединенных ящиках ввода

Question

Я создал прослушиватель событий keyup в классах userInput, но после добавления нескольких ящиков ввода с тем же классом этот прослушиватель событий не будет запускаться из новых полей ввода.

HTML

<div id="wrapper"> 
    <input type="text" class="userInput"> 
    <button type="button" id="add_input">Add</button> 
</div> 

Javascript

$(document).ready(function(){ 
    $(".userInput").on("keyup", function(){ 
     alert("Key has been released"); 
    }); 

    var target = $("#wrapper"), 
     innerHTML = "<div><input type=\"text\" class=\"userInput\"></div><br>"; 
    $("#add_input").on("click", function(){ 
     target.append(innerHTML); 
    }); 
}); 

Слушатель событие срабатывает для первоначального ввода, но не для любого из новых приложенных полей ввода, которые имеют тот же класс.

Answer 1

Использование event delegation:

$(".wrapper").on("keyup", ".userInput", function(){ 
    alert("Key has been released"); 
});