Eventos activados por el elemento generado dinámicamente no son capturados por controlador de eventos

Question

Tengo un <div> con id="modal" generado dinámicamente con el método jQuery load():

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

word.edit.php contiene un elemento de entrada de unos pocos, que se carga en un modal <div> .

utilizando el método de jQuery keyup puedo capturar los valores de entrada después de un incendios de evento, pero cuando se añaden los elementos dinámicamente a la div modal, el evento no hay incendios llonger cuando el usuario entra en su texto.

¿Qué método jQuery admite la gestión de eventos activados por elementos creados dinámicamente?

El código para la creación de los nuevos elementos de entrada es:

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

El código para capturar los valores del usuario es:

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

Este segundo bloque de código parece funcionar para los elementos originales, pero no está activado por los nuevos elementos generados dinámicamente.

Answer 1

Es necesario delegate the event al elemento estático ancestro más cercano dentro de la página (véase también "Understanding Event Delegation"). Esto simplemente significa que el elemento donde enlaza su controlador de eventos debe ya existe en el momento en que el controlador está vinculado, por lo que para los elementos generados dinámicamente debe permitir que el evento suba y lo maneje más arriba.

El método jQuery .on es la manera de hacerlo (o .delegate para versiones anteriores de jQuery.)

// If version 1.7 or above 

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

O en las versiones anteriores

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

Answer 2

Esto está sucediendo porque está agregando el elemento de entrada después de ha conectado el evento. Trate .on:

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

Usando .on se asegurará de que el evento keyup está conectado a las entradas que se encuentran en la página de origen, así como las que se añadan más adelante de forma dinámica.

Answer 3

Cuando cambie dinámicamente el DOM, jQuery no los adjuntará. Es necesario utilizar on() and delegated events

Para sus elementos de entrada, necesitará algo como:

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

Cuando el parentSelector es algo mayor en el DOM que el elemento de entrada, y un elemento que existe en carga de la página , tal vez el ID de formulario o algo así.

Answer 4

Los enlaces de función se realizan en carga de página. Para trabajar en elementos creados dinámicamente usando la función live(). Ejemplo:

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

Answer 5

Si necesita capturar cambios para todos los elementos de formulario, en particular cajas de selección, sé que no se mencionan aquí, pero es útil saber , utilice el siguiente código:

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

Esto debe abarcar toda input, textarea, select, checkbox, radio, etc.