3

Tengo un select el cual al seleccionar un elemento carga otro select dentro de mi página:

<div class="col-md-6 form-group" id="grpCmbIdProd">
  <label for="cmbIdProd" class="control-label label-servicio">Producto:</label>
  <select class="form-control" name="cmbIdProd" id="cmbIdProd">
  </select>
</div>

El código JQuery que realizaba la operación correctamente es:

$("#cmbIdProd").change(function(){
    cargaNombreProductoXId($(this).val());
});

Sin embargo luego de unos cambios el select comenzó a generarse de manera dinámica, éste queda generado correctamente sin embargo el evento change dejó de funcionar, investigando como arreglarlo se llegó al siguiente código:

$("#grpCmbIdProd").on('change' , '#cmbIdProd' , function(){
    cargaNombreProductoXId($(this).val());
});

Pero sigue sin captar el evento de cambio de valor, como no tengo mucha experiencia en JQuery no sé si es porque está mal hecho o hay algún otro problema. ¿Está correcto el nuevo código y debo buscar en otro lado? ¿O hay algo más que se me escapa y debo agregar para captar correctamente el evento change?

(Editado: Cambio $('#cmbIdProd') por '#cmbIdProd', pero sigue sin funcionar)

4 respuestas 4

0

En este caso debes verificar si el evento change esta cada vez que por lo menos cargas un ajax, si es un ajax que hace dinámicas las opciones, debes colocar el evento change dentro del done para que pueda asignar el evento a las nuevas opciones, yo te recomiendo utilizar siempre un unbind del evento y luego le haces el bind asi con esta tecnica no te preocupas de cuantas veces carga el evento en un objeto del html ya que siempre le quitaras el actual y le colocaras uno nuevo.

Espero que te funcione para tu caso.

$(document).ready(function(){
  
  $('#cmbIdProd').unbind('change').bind('change', function (e){
    
    optionSeleccionado = $(this).val();
    $('#resultado').append('cambio :'+optionSeleccionado+'<br/>' )
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 form-group" id="grpCmbIdProd">
  <label for="cmbIdProd" class="control-label label-servicio">Producto:</label>
  <select class="form-control" name="cmbIdProd" id="cmbIdProd">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
  </select>
</div>

<div id="resultado"></div>

1
  • ¡Gracias! Al usar el unbind junto con el bind y dejar el evento dentro del .done que carga el select el código volvió a captar el evento y realizó el cambio como antes. Commented el 18 may. 2016 a las 12:41
0

puedes intentar de esta manera:

<select class="form-control" name="cmbIdProd" id="cmbIdProd" onchange="cargaNombreProductoXId(this)">
</select>

Saludos

1
0

Hay un error en el código que compartes, tienes esto:

$("#grpCmbIdProd").on('change' , $('#cmbIdProd') , function(){
    cargaNombreProductoXId($(this).val());
});

Pero el segundo parámetro es incorrecto: estás pasando el objeto (o array de objetos) de jQuery, cuando lo que deberías pasar es una cadena de texto con el selector (fuente). Entonces quedaría de esta manera:

$("#grpCmbIdProd").on('change' , '#cmbIdProd', function(){
    cargaNombreProductoXId($(this).val());
});

Prueba a hacer ese cambio, y comenta/edita la pregunta si falla para seguir a partir de ahí.

1
  • Realicé el cambio en el segundo parámetro pero sigue sin captar el evento, de todas maneras tenía la duda si estaba utilizando correctamente el segundo parámetro así que gracias por la corrección. Commented el 18 may. 2016 a las 12:23
0

Eduardo, buenas. La respuesta de Alvaro Montoro es correcta. Lo que puede estar pasando es que el objeto contenedor al que se hace referencia también se está creando dinámicamente.

En el ejemplo:

$("#grpCmbIdProd").on('change' , '#cmbIdProd', function(){ cargaNombreProductoXId($(this).val()); });

El objeto con id="grpCmbIdProd" debe existir antes de ejecutar el código mencionado.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.