jQuery Pass keyup() событие для новых элементов

Question

У меня есть поле ввода, которое принимает ввод пользователя. Это похоже на приложение «To Dos», где пользователь может добавлять несколько полей. Я поймаю ключ «Ввод», чтобы создать новое поле ввода для пользователя и дать этому элементу фокус, например.

$(".input_duplicate").keyup(function (e) { 
    if (e.keyCode == 13 && this.value.length > 0) { 
     var $newElm = $('<input type="text" class="input_duplicate">'); 
     $newElm.insertAfter(this); 
     $newElm.focus(); 
     $newElm.select(); 
    } 
}); 

$(".input_duplicate").keyup не привязывается к новому элементу. Как я могу изменить это так, чтобы объект $newElm получил событие keyup()?

Answer 1

У вас есть два основных варианта:

1. Просто Крюк событие на новых входов по мере их добавления. Здесь нет необходимости в образце кода. Вы переместите логику обработчика событий в именованную функцию, чтобы вы могли ее повторно использовать.

   Но я бы, вероятно, пойти с:

2. Вы можете использовать событие делегация:

   $(document).on("keyup", ".input_duplicate", function (e) { 
       if (e.keyCode == 13 && this.value.length > 0) { 
        var $newElm = $('<input type="text" class="input_duplicate">'); 
        $newElm.insertAfter(this); 
        $newElm.focus(); 
        $newElm.select(); 
       } 
   }); 
   

   Это перехватывает событие на контейнере (document в выше), но только звонки ваш обработчик, если событие прошло через элемент, соответствующий селектору делегирования (.input_duplicate выше). Когда он вызывает ваш обработчик, this - это элемент, который соответствует селектору.

   В приведенном выше документе я «укореняю» делегацию на документе, но если есть контейнер для всех этих входов, который ближе к ним, вы, вероятно, захотите это сделать.

Пример делегирования событий:

var counter = 1; 
 
$("input[type=button]").click(function() { 
 
    ++counter; 
 
    $("#container").append(
 
    '<div><input type="text" id="i' + counter + '"></div>' 
 
); 
 
}); 
 
$("#container").on("keyup", "input[type=text]", function() { 
 
    snippet.log("keyup caught on " + this.id); 
 
});

<div id="container"> 
 
    <input type="button" value="Add"> 
 
    <div><input type="text" id="i1"></div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> 
 
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>