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

Event listener on appended input boxes

本文关键字：事件 侦听器 输入      更新时间：2023-09-26

我在名为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);
    });
});

事件侦听器为原始输入框激发，但不为任何具有相同类的新附加输入框激发。

使用事件委派：

$(".wrapper").on("keyup", ".userInput", function(){
    alert("Key has been released");
});
相关文章：