Поймать событие JavaScript на полях, созданных динамически

Question

У меня есть поле ввода с классом с именем "form_inputext1".

Я выполняю некоторые действия при нажатии клавиши ВВОД, используя этот код:

jQuery(".form_inputext1").keypress(function(event) {
      console.log(event.keyCode);
      if (event.keyCode == '13' || event.which == '13') {
         event.preventDefault();

         jQuery("#addMoreOptions").click();

         return false;
      }
    });

Эта часть отлично работает. Он добавляет еще одно поле ввода класса "form_inputext1" в результате вызова ajax.

Проблема в том, что это добавленное поле не связано с событием нажатия клавиши, которое я написал. Я предполагаю, что это потому, что код jQuery только присоединяет событие к существующим полям, а не к полям, добавленным в будущем.

Как я могу обойти это? Я хочу, чтобы эта функция применялась к onkeypress даже для входов, которых еще нет в DOM.

Answer 1

ВЫ можете использовать Jquery live :

jQuery(".form_inputext1").live('keypress', function(event) {
      console.log(event.keyCode);
      if (event.keyCode == '13' || event.which == '13') {
         event.preventDefault();

         jQuery("#addMoreOptions").click();

         return false;
      }
});

Или вы можете добавить событие нажатия клавиш при создании элемента, что даст вам гораздо лучшую производительность:

$('.clicker').click(function() {
    $('<div class="clicker" />').text('new').appendTo($(this)).keypress(function(event) {
        alert(event.which);
    })
})

Пример этого

Answer 2

Если вы используете живой метод jQuery для привязки события к классу, он будет применяться даже к элементам, которые добавляются в DOM после вызова живого метода.

Документация: http://api.jquery.com/live/

Из документации:

Чтобы привязать обработчик кликов к целевому элементу, используя этот метод:

$('.clickme').live('click', function() {
  // Live handler called.
});

А затем добавьте новый элемент:

$('body').append('Another target');

Затем нажимает на новыйэлемент также вызовет обработчик.

Answer 3

Используйте .live() или .delegate() вместо.

http://api.jquery.com/live/

http://api.jquery.com/delegate/

Answer 4

Использование .live():

$('.form_inputext1').live('keypress', function ( event ) {

});