Выбор элементов, динамически созданных и прослушивающих 2 или более событий

Question

в моем коде, который я пишу, у меня есть динамически созданный div с полем ввода и кнопкой. когда происходят их события, они выполняют аналогичную функцию. но есть небольшие различия. например, если нажата кнопка, найдите значение siblings, которое является значением входных данных, и удалите div и замените div, который включает в себя новый вход и кнопку. но если пользователь нажал, введите, чтобы найти $ (это) .val() и сделать то же самое с div. поэтому функции схожи. Я хочу объединить эти обработчики событий с соответствующим событием.

Я хочу сделать что-то вроде этого

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

мне нужен второй параметр в на(), так как кнопки и вход создаются динамически

Если я что-то сделать, как показано ниже события Я думаю, обработчики не привязаны к вновь созданным элементам.

$(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) { 

Я рекомендую вам добавить класс для всех целевых элементов и использования этот класс для привязки события.

Javascript:

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

Html:

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