JQuery - Que alguien encuentre el error !!! (jquery)

   
Vista:

Que alguien encuentre el error !!! (jquery)

Publicado por Diego (8 intervenciones) el 29/01/2016 21:12:11
Buenas tardes...necesito que alguien me marque dónde está el error....porque la verdad que ya no sé por dónde buscar. Paso a explicar. Dejé solamente un campo de texto que al hacer click abre una ventana modal. Esta ventana tiene un select donde se elije cantidad de habitaciones, es para un pequeño hotel. Al elegir la cantidad se crean dos select mas por cada habitación seleccionada, uno con huéspedes adultos y otro con menores. Hasta ahí funciona perfecto. Al seleccionar la cantidad de huéspedes menores debería abrir otro select mas por cada menor seleccionado con las edades... esto lo tengo hecho exactamente igual en otra pagina y funciona, pero acá no. Para simpificar eliminé todo ese código y sólo dejé un alert que no funciona.
Esta funcion busca un cambio en el selector #h1m que es el de menores de la habitación 1 (está simpificado, en realidad captura cualquier cambio en los selectores de menores). Si utilizo el inspector de elementos se ve que el id es h1m...pero al intentar trabajar con él no puedo.

A ver si alguien encuentra el error...yo ya no veo. Dejo un ejemplo funcional para que prueben:

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="es">
<head>
<title>Pagina</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<body>
 
<div class="col-xs-12 col-md-3">
<input type="text" class="form-control botonbuscar" id="huespedes" name="huespedes" value="Huéspedes - Haga click" data-toggle="modal" data-target="#ventana">
<br/>
</div>
 
<!--INICIO VENTANA MODAL-->
 
<div class="modal fade" id="ventana" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Cerrar</span></button>
<h4 class="modal-title" id="ModalLabel"><center>Distribución de Huéspedes</center></h4>
</div>
<div class="modal-body">
<form id="formulario" method="get" action="index.html">
<center><p>Seleccione la cantidad de habitaciones.</p></center><br>
<div class="form-group">
<label>Cantidad de habitaciones</label>
<select class="form-control" id="h">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</div>
<div id="h1" class="agregado"></div>
<div id="h2" class="agregado"></div>
<div id="h3" class="agregado"></div>
<div id="h4" class="agregado"></div>
<div id="h5" class="agregado"></div>
<div id="h6" class="agregado"></div>
<div id="h7" class="agregado"></div>
<div id="h8" class="agregado"></div>
<div id="h9" class="agregado"></div>
<div id="h10" class="agregado"></div>
</div>
<div class="modal-footer">
<button type="reset" id="limpiar" class="btn btn-warning btn-block">Limpiar formulario</button>
<button type="button" id="cancelar" class="btn btn-danger btn-block">Cancelar</button>
<button type="button" id="cargahabitacion" class="btn btn-primary btn-block">Guardar</button>
</div>
</form>
</div>
</div>
</div>
<!--FIN VENTANA MODAL-->
 
 
<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/datepicker-es.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
jQuery(document).ready(function() {
$('#h').change(function() {
var ch = $('#h').val();
var cont = 1;
while (cont <= ch) {
$('#h'+cont).html('<center><label>HABITACION '+cont+'</label></center>\
<div class="form-group">\
<label ">Adultos</label>\
<select name="h'+cont+'a" class="form-control">\
<option>1</option>\
<option>2</option>\
</select>\
</div>\
<div class="form-group">\
<label>Menores</label>\
<select name="h'+cont+'m" class="form-control" id="h'+cont+'m">\
<option>0</option>\
<option>1</option>\
<option>2</option>\
<option>3</option>\
<option>4</option>\
</select>\
</div>');
cont++;
}
});
$('#limpiar').click(function() {
$(".agregado").empty();
});
$('#cancelar').click(function() {
$(".agregado").empty();
$('#h').val('0');
$('#ventana').modal('hide');
});
$('#h1m').change(function() { //ESTA FUNCION NO SE EJECUTA 
alert("CAMBIO LA CANTIDAD DE MENORES"); //ESTO ES UN EJEMPLO, EN REALIDAD ACÁ SE CREA OTRO SELECT CON LAS EDADES
});
});
 
</script>
</body>
</html>
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

Que alguien encuentre el error !!! (jquery)

Publicado por Diego (8 intervenciones) el 30/01/2016 00:02:50
Estudiando más a fondo me dí cuenta que si los elementos son creados dinámicamente no es posible ejecutar ningún método de esta manera:


1
2
3
$('#id_elemento').click(function() {
	alert("MENSAJE");
});

Según estuve leyendo en la página de Jquery oficial lo correcto es:

1
2
3
$('#id_elemento').on("click", function(){
	alert("MENSAJE");
});

Igualmente tampoco me funciona.....

A seguir estudiando
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
Imágen de perfil de xve

Que alguien encuentre el error !!! (jquery)

Publicado por xve (557 intervenciones) el 30/01/2016 08:27:12
Hola Diego, una manera, es recargar las funciones una vez has creado los elementos dinámicamente.

Una cosa que he hecho algunas veces, es poner las funciones dentro de una función, y cuando cargo los elementos, llamo a la función para que me recargue todas las funciones.

Espero que te sirva.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Vainas

Que alguien encuentre el error !!! (jquery)

Publicado por Vainas (96 intervenciones) el 30/01/2016 14:12:59
Buenas:

Vas bien encaminado. La manera es esta

1
2
3
$('#padre').on("click", "#hijo",function(){
	alert("MENSAJE");
});

Donde padre es un id te una etiqueta que no se recarga dinamicamente, podriamos decir que es fija, he "hijo puede ser una clase, id del que secra dinamicamente.

Extra: no hagas esto:

1
$('#h'+cont).html('<center><label>...

cuando puedes hacer esto:

1
2
3
4
var label = $("<label></label>", {id: "loquesea"});
var center ....
label.append(center);
...

Seguro que hay formas mas faciles pero con esta no te equivocas de abrir y cerrar cosas.


Saludos.
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