Función que no se ejecuta 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:
<!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">×</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>
