选择动态创建并监听 2 个或更多事件的元素

Question

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

我想做这样的事情

$("body").on('click keypress' ,'button input', 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

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

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

我建议您向所有目标元素添加一个 class 并使用该 class 绑定事件。

Javascript:

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

Html:

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

选择动态创建并监听 2 个或更多事件的元素

selecting elements that are dynamically created and that listen to 2 or more events

html

javascript

jquery

javascript-events