JQuery - Asociar eventos a elementos HTML creados dinamicamente

   
Vista:

Asociar eventos a elementos HTML creados dinamicamente

Publicado por Manuel Hernandez (1 intervención) el 06/08/2017 04:02:43
Hola, actualmente trabajo en un proyecto de la universidad y me he visto en apuros con este código, estaría agradecido si me ayudaran a resolver el problema.

Estoy trabajando un formulario que permite agregar campos dinámicamente. El problema es que esos campos inicialmente tienen eventos javascript los cuales no se generan en los campos generados dinámicamente.

El formulario en primer lugar aparece así >>> http://prntscr.com/g4wd00

Cuando ingreso la información en los inputs los títulos que tienen se desplazan y se hacen de menor tamaño permitiendo así ingresar la información http://prntscr.com/g4wd9y

EL problema radica a la hora de generar los campos dinámicamente, no funciona igual que el formulario original. >>> http://prntscr.com/g4we6a

El código del html del formulario es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<form id="form_advanced_validation" action="../cliente/registrar" method="POST">
 
	<input type="hidden" name="codCliente" value="<?=$codCliente?>" />
 
	<div class="body table-responsive">
		<table class="table table-striped" id="dynamic_field">
			<tbody>
				<tr>
					<td class="col-sm-11">
						<h4>Ingrese la informacion</h4>
						</br>
						<div class="form-group form-float">
							<div class="form-line">
								<input id="name1" type="text" class="form-control" name="name1" pattern="[A-Za-z]{4-16}" required>
								<label class="form-label">Nombres</label>
							</div>
							<div class="help-info">Mínimo 4 caracteres</div>
						</div>
						<div class="form-group form-float">
							<div class="form-line">
								<input type="text" class="form-control" name="apellido_resp[]" pattern="[A-Za-z]{4-16}" required>
								<label class="form-label">Apellidos</label>
							</div>
								<div class="help-info">Mínimo 4 caracteres</div>
						</div>
						<div class="form-group form-float">
							<div class="form-line">
								<input type="text" class="form-control" name="tel_resp[]" required >
								<label class="form-label">Teléfono</label>
							</div>
							<div class="help-info">Formato: 2XXX-XXXX </div>
						</div>
						<div class="form-group form-float">
							<div class="form-line">
								<input type="email" class="form-control" name="email_resp[]" required>
								<label class="form-label">Correo eléctronico de la empresa</label>
							</div>
							<div class="help-info">Formato: admin@admin.com </div>
						</div>
 
					</td>
					<td class="col-sm-1">
						<button type="button" class="btn btn-success waves-effect" id="add" name="add"> + Agregar responsable</button>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
 
	<div class="form-group form-float">
	</br>
	</div>
 
	<div class="form-group form-float">
	<button class="btn btn-primary waves-effect" type="submit">REGISTRAR</button>
	</div>
</form>



El código Javascript es el siguiente.

1
2
3
4
5
$('#add').on("click","",function(){
        i++;
 
      $('#dynamic_field').append('<tr id="row'+i+'"> <td class="col-sm-11"><h4>Ingrese la informacion</h4></br><div class="form-group form-float"><div class="form-line"><input id="name'+i+'" type="text" class="form-control" name="name'+i+'" pattern="[A-Za-z]{4-16}" required autofocus="autofocus"><label class="form-label">Nombres</label></div><div class="help-info">Mínimo 4 caracteres</div></div><div class="form-group form-float"><div class="form-line"><input type="text" class="form-control" name="apellido_resp[]" pattern="[A-Za-z]{4-16}" required><label class="form-label">Apellidos</label></div><div class="help-info">Mínimo 4 caracteres</div></div><div class="form-group form-float"><div class="form-line"><input type="text" class="form-control" name="tel_resp[]" required ><label class="form-label">Teléfono</label></div><div class="help-info">Formato: 2XXX-XXXX </div></div><div class="form-group form-float"><div class="form-line"><input type="email" class="form-control" name="email_resp[]" required><label class="form-label">Correo eléctronico de la empresa</label></div><div class="help-info">Formato: admin@admin.com </div></div></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});


Estuve leyendo que el problema viene dado cuando el elemento al que queremos asociar un evento no existe en el momento de cargar el javascript, sino que se ha creado dinámicamente en algún momento. Hasta que el elemento exista, no se le pueden asociar eventos.

Una de las soluciones es a través del método ON de JQuery, pero no sé cómo aplicarlo. No tengo mucha practica en esto. Espero puedan ayudarme. Gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de kip

Asociar eventos a elementos HTML creados dinamicamente

Publicado por kip (38 intervenciones) el 08/08/2017 01:00:12
Hola, lo que debes usar en este caso con .on() de jQuery(tambien puedes hacerlo con vanilla javascript) es lo que se conoce como 'event delegation', que consiste en asociar un evento al elemento padre y que luego se verifique que elemento hijo fue el que desencadeno/activo el evento y si es el que queremos, ejecutamos la tarea vinculada a este.

La ventaja es que al asociar el evento al elemento padre, que no es dinámico, siempre tendremos el 'listener' sobre este.

En tu caso podria ser asi:

1
2
3
$('#dynamic_field').on('click', '.claseafiltrar', function(e){
    .....
});

'.claseafiltrar' sera el selector a usar para filtrar el elemento hijo de '#dynamic_field'.

Pruebalo y nos cuentas.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Revisar política de publicidad