附加輸入框上的事件監聽器

Question

我在一個名爲userInput的類上做了一個keyup事件監聽器，但是在附加了多個輸入框之後，這個事件監聽器不會從新的輸入框中觸發。

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