1

Creo los dinamicamente con un botón, pero al momento que quiero obtener el id del elemento select del que acabo de crear nuevo, con la función .on change atraves de la clase, no ejecuta la función, solo para el primer elemento, que es el que esta creado desde que carga la página, porque los elementos creados dinámicos no entra la función, si tiene la misma clase?

<div class="form-group">
    <form name="add_name" id="add_name">
        <div class="table-responsive">
            <table class="table table-bordered" id="dy_ade">
              <tr>
                <td>
                    <div class='col-xs-12 col-md-11'>
                      <div class='row'>
                        <div class='col-xs-5' style='font-size: 12px;''>
                          <label class='mt-3'><b>Cantidad a reducir de la estructura seleccionada: </b></label>
                        </div>
                        <div class='col-md-2' >
                            <input type='number' min='0' max='100000' name="name[]" class="form-control name_list mb-3" id="unidad" placeholder="$">
                        </div>
                        <div class='col-md-3' >
                          <select class="form-control input-sm selecCap" name="estado" id="cap_c1">
                            <option value="-1">Selecciona el capítulo</option>
                            <option value="1">Capítulo 1000</option>
                            <option value="2">Capítulo 2000</option>
                            <option value="3">Capítulo 3000</option>
                            <option value="4">Capítulo 4000</option>
                            <option value="5">Capítulo 5000</option>
                            <option value="6">Capítulo 6000</option>
                          </select> 
                        </div>
                        <div class='col-md-4'>
                          <select class="form-control input-sm" name="estado" id="estructu_c1" disabled>
                            <option value="-1">Estructura programatica a aumentar</option>
                          </select> 
                        </div>
                      </div>
                    </div>
                </td>
                <td>
                  <center>
                    <button type="button" name="pluss" id="pluss" class="btn btn-success mt-2"><span class="fa fa-plus-circle"></span></button>
                  </center>
                </td>
              </tr>
            </table>
        </div>
    </form>
</div>
<script>

$(document).ready(function(){
    $('.selecCap').on('change', function(){
        var elemento = document.getElementsByClassName('selecCap'); 
        var id = elemento[0].getAttribute('id');
        console.log(elemento);
        alert(id);
    });

  var i=1;
  $('#pluss').click(function(){
    i++;
    $('#dy_ade').append('<tr id="row'+i+'"><td><div class="col-xs-12 col-md-11"><div class="row"><div class="col-xs-5" style="font-size: 12px;"><label class="mt-3"><b>Cantidad a reducir de la estructura seleccionada: </b></label></div><div class="col-md-2"><input type="number" min="0" max="100000" name="name[]" class="form-control name_list mb-3" id="unidad" placeholder="$"></div><div class="col-md-3"><select class="form-control input-sm selecCap" name="estado" id="cap_c'+i+'"><option value="-1">Selecciona el capítulo</option><option value="1">Capítulo 1000</option><option value="2">Capítulo 2000</option><option value="3">Capítulo 3000</option><option value="4">Capítulo 4000</option><option value="5">Capítulo 5000</option><option value="6">Capítulo 6000</option></select></div><div class="col-md-4"><select class="form-control input-sm" name="estado" id="estructu_c'+i+'" disabled><option value="-1">Estructura programatica a aumentar</option></select></div></div></div></td><td><center><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove mt-4">X</button></center></td></tr>');
  });

  $(document).on('click', '.btn_remove', function(){
    var button_id = $(this).attr("id"); 
    $('#row'+button_id+'').remove();
  });
2
  • Tu pregunta no es del todo clara, no se comprende muy bien que es lo que quieres lograr. En el código en efecto solo buscas el ID del primer elemento mediante elemento[0].
    – A. Cedano
    el 17 ago. 2018 a las 16:15
  • pues obtengo el elemento[0] refiriéndome a las propiedades de esa clase que tuvo el Onchange, ese seria el id, no tiene nada que ver con numero de select al que le di el Onchange, o no es así? el 17 ago. 2018 a las 16:25

1 respuesta 1

1

Cuando usas objetos dinamicos, debes de capturar los eventos con algun elemento padre que no sea creado dinamicamente. Algo asi:

$(document).ready(function(){
$('#add_name').on('change', '.selecCap', function(){
    var elemento = $(this); 
    var id = elemento.attr('id');        
    alert(id);
});
4
  • y como obtengo los eventos creados dinamicamente? tengo que hacer una función aparte? el 17 ago. 2018 a las 16:31
  • Ya edite mi respuesta. Tienes que usar this
    – alanfcm
    el 17 ago. 2018 a las 16:34
  • muchas gracias, me sirvió y aprendí algo nuevo, entonces cada que cree objetos dinamicos, debo de referenciarme con el objeto padre?, aun no soy muy buena en js, gracias el 17 ago. 2018 a las 16:42
  • Asi es @KarlaHuerta
    – alanfcm
    el 17 ago. 2018 a las 16:46

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.