Eventos acionados por elementos gerados dinamicamente não são capturados pelo manipulador de events

Eu tenho um

com id="modal" gerado dinamicamente com o método jQuery load() :

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

word.edit.php contém alguns elementos de input, que são carregados em um modal

.

Usando o método keyup do jQuery, posso capturar os valores de input depois que um evento é triggersdo, mas quando os elementos são adicionados dinamicamente ao div modal, o evento não é iniciado quando o usuário digita seu texto.

Qual método jQuery suporta o tratamento de events triggersdos por elementos criados dinamicamente?

O código para criar os novos elementos de input é:

 $('#add').click(function() { $('') .appendTo('#modal'); 

O código para capturar os valores do usuário é:

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

Este segundo bloco de código parece funcionar para os elementos originais, mas não é acionado pelos novos elementos gerados dinamicamente.

Você precisa delegar o evento ao elemento ancestral estático mais próximo da página (consulte também “Noções básicas sobre delegação de events” ). Isso significa simplesmente que o elemento no qual você vincula seu manipulador de events deve existir no momento em que o manipulador é ligado; portanto, para elementos gerados dinamicamente, é necessário permitir que o evento borbulhe e trabalhe mais adiante.

O método jQuery .on é a maneira de fazer isso (ou .delegate para versões mais antigas do jQuery).

 // If version 1.7 or above $('#modal').on('keyup', 'input', function() { handler = $(this).val(); name = $(this).attr('name'); }); 

Ou em versões mais antigas

 // 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'); }); 

Isso está acontecendo porque você está adicionando o elemento de input depois de conectar o evento. Tente .on :

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

O uso de .on garante que o evento keyup esteja conectado às inputs que estão originalmente na página, bem como as que são adicionadas posteriormente dinamicamente.

Quando você altera dinamicamente o DOM, o jQuery não appendá manipuladores de events a eles. Você precisa usar on () e events delegates

Para seus itens de input, você precisará de algo como:

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

Onde o parentSelector é algo maior no DOM do que o elemento de input e um elemento que existe no carregamento da página, talvez o ID do formulário ou algo assim.

Ligações de function são feitas no carregamento da página. Trabalhar em elementos criados dinamicamente usando a function live (). Exemplo:

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

Se você precisar capturar alterações para todos os elementos de formulário, especialmente checkboxs de seleção, sei que elas não são mencionadas aqui, mas é útil saber, use o código a seguir:

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

Isso deve abranger todas as input , textarea , select , checkbox , radio , etc.