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:
El código Javascript es el siguiente.
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.
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: [email protected].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: [email protected].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
0
