javascript - 选择动态创建并监听两个或多个事件的元素

Question

在我正在编写的代码中，我有一个动态创建的带有输入框和按钮的 div。当它们的事件发生时，它们具有相似的功能，但存在细微差别。例如，如果单击按钮，找到作为输入值的 siblings 值，然后删除 div 并替换包含新输入的 div 和 a 按钮，但如果用户按下 enter 以查找 $(this).val() 和div做同样的事情，所以功能是相似的。我想将这些事件处理程序组合到发生的正确事件。

我想做这样的事情:

$("body").on('点击按键' ,'按钮输入', function(e){

我需要 on() 中的第二个参数，因为按钮和输入是动态创建的

如果我做类似下面的事情，我认为事件处理程序不会附加到新创建的元素。

$(document).ready(function() {
    var counter = 0

    function giveNew(el, i) {
        $(el).remove()
        $("body").append("<button class='go" + " " + i + "' >Go</button>")
    }

    $("body button, body input").on('click keypress', function(e) {
        counter++;
        var target = $(e.target);
        if (target.is('button')) {
            for (var i = 0; i < counter; i++) {
                giveNew(this, i)
            }

            console.log($(this).attr("class"))
        } else if (target.is('input')) {
            if (e.which == 13) {
                alert("input");
            }

        }
    })

});

html:

<input class = "input"> <button class="go">Go</button>

Answer 1

在元素之间添加逗号以绑定(bind) multiple 上的事件元素

$("body").on('click keypress' ,'button, input', function(e) {

我建议您向所有目标元素添加一个类，并使用该类来绑定(bind)事件。

Javascript:

$(document.body).on('click keypress', '.myClass', function(e) {

HTML:

<input class ="input myClass" />
<button class="go myClass">Go</button>