События, инициируемые динамически сгенерированным элементом, не захватываются обработчиком событий

У меня есть <div> с id="modal", сгенерированный динамически с помощью метода jQuery load():

$('#modal').load('handlers/word.edit.php');

word.edit.php содержит несколько элементов ввода, которые загружаются в модальный <div>.

Используя метод jQuery keyup, я могу захватить входные значения после срабатывания события, но когда элементы динамически добавляются в модальный div, событие, когда llonger не запускается, когда пользователь вводит свой текст.

Какой метод jQuery поддерживает обработку событий, вызванных динамически создаваемыми элементами?

Код для создания новых элементов ввода:

$('#add').click(function() {
    $('<input id="'+i+'" type="text" name="translations' + i + '"  />')
      .appendTo('#modal');

Код для захвата пользовательских значений:

$('input').keyup(function() {
    handler = $(this).val();
    name = $(this).attr('name');

Этот второй блок кода работает для исходных элементов, но он не запускается новыми динамически генерируемыми элементами.

Ответы

Ответ 1

Вам необходимо делегировать событие ближайшему элементу статического предка на странице (см. также "Понимание делегирования событий" ). Это просто означает, что элемент, в который вы привязываете обработчик событий, должен существовать в момент привязки обработчика, поэтому для динамически генерируемых элементов вы должны позволить событию пузыриться и обрабатывать его дальше.

Метод jQuery .on - это способ сделать это (или .delegate для более старых версии jQuery.)

// If version 1.7 or above

$('#modal').on('keyup', 'input', function() {
    handler = $(this).val();
    name = $(this).attr('name');
});

Или в более старых версиях

// If version 1.6 or below

// note the selector and event are in a different order than above
$('#modal').delegate('input', 'keyup', function()
{
    handler = $(this).val();
    name = $(this).attr('name');
});

Ответ 2

Это происходит потому, что вы добавляете элемент ввода после подключения к событию. Попробуйте .on:

$('body').on('keyup', 'input', function() {
    handler = $(this).val();
    name = $(this).attr('name');
});

Используя .on, убедитесь, что событие keyup подключено к входам, которые находятся на странице изначально, а также к любым, которые добавляются позже динамически.

Ответ 3

При динамическом изменении DOM jQuery не будет прикреплять к ним обработчики событий. Вам нужно использовать on() и делегированные события

Для ваших элементов ввода вам потребуется что-то вроде:

$("<parentSelector>").on("keyup", "input", function() { 
    handler = $(this).val();
    name = $(this).attr('name');
})

Если parentSelector является чем-то более высоким в DOM, чем элемент ввода, и элемент, который существует при загрузке страницы, возможно, идентификатор формы или что-то в этом роде.

Ответ 4

Связывание функций выполняется при загрузке страницы. Для работы с элементами, созданными динамически с помощью функции live(). Пример:

$ ("p"). live ("click", function () {
    // Your function
});

Ответ 5

Если вам нужно зафиксировать изменения для всех элементов формы, особенно выберите поля, я знаю, что они здесь не упомянуты, но полезно знать, используйте следующий код:

$(document).on('change', ':input', function () {
   alert('value of ' + $(this).attr('name') + ' changed')
});

Это должно охватывать все input, textarea, select, checkbox, radio и т.д.