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

附加输入框上的事件侦听器

1 个答案: