2

Estoy creando un formulario en el cual con un botón agrego "n" bloques de código HTML dinámicamente a un <div>. El principal elemento de este HTML es un botón (Que al presionarlo abre un Modal). En este Modal solo se pueden seleccionar elementos de una lista (disponibles), pasarlos a otra lista (seleccionados) y estos ser agregados dentro de una tabla debajo del botón desde el cual el Modal fue invocado.

Mi problema se presenta cuando dinámicamente agrego dos o mas bloques de código HTML; para el primer botón que invoca el Modal, la tabla con los elementos es agregada debajo de este sin ningún problema. Pero cuando se invoca al modal desde otro botón (Sin importar el orden) y se agrega la tabla, esta se inserta correctamente debajo del botón que invoco al Modal, pero también se inserta debajo de la tabla que ya había sido agregada con anterioridad. Osease el primer botón que fue presionado ahora ya tiene dos tablas (Una con los elementos que se seleccionaron cuando él invoco el Modal y la otra con los elementos seleccionados por el segundo botón que invoco el Modal).

Si sigo agregado mas elementos desde el Modal, esto se vuelve exponencial; el ultimo botón que invoca al modal tiene una tabla, el penúltimo botón presionado tiene dos, el antepenúltimo tiene tres y así sucesivamente.

Lo que yo quisiera es que la tabla con los elementos solo sea agregada única y exclusivamente debajo del botón desde el cual se invoca al Modal, sin afectar al resto.

Observaciones:

  • Todos estos eventos los manejo con JQuery
  • Para saber donde insertar la tabla con los elementos, selecciono el nodo Abuelo (Según mi estructura) del botón que invoca al Modal.

Este son los códigos Javascript y HTML:

$(document).ready(function() {

  //Agregar nuevo botón
  $("#btn_nuevo_boton").click(function() {
    $("#div_contenido").append(
      '<div class="form-row">' +
      '<div class="form-group col-md-12">' +
      '<button type="button" class="btn btn-primary btn_agregar_opciones">Agregar opciones</button>' +
      '</div>' +
      '</div>'
    );
  });

  //Si se da clic a algún botón creado dinámicamente
  $("#div_contenido").on("click", ".btn_agregar_opciones", function() {
    //Variable que almacena el 'nodo abuelo' del botón al que se dio clic
    var abuelo = $(this).parents(':eq(1)');
    $('#modal_agregar').modal('toggle');
    //Botón que esta dentro del Modal
    $('.btn_confirmar').click(function() {
      //Variable que concatena el código HTML para ser insertado al final
      var tabla = '<table class="table table-borderless table-sm">';
      $("#lista_seleccionado option").each(function() {
        tabla += '<tr>' +
          '<td class="mini-td">' + $(this).text() + '</td>' +
          '</tr>';
      });
      tabla += '</table>';
      //Se agrega el contenido de la variable al DOM
      abuelo.append(tabla);
      $('#modal_agregar').modal('toggle');
    });
  });

  //Pasar opciones entre listas del Modal
  $('.pasar').click(function() {
    return !$('#lista_opciones option:selected').remove().appendTo('#lista_seleccionado');
  });
  $('.quitar').click(function() {
    return !$('#lista_seleccionado option:selected').remove().appendTo('#lista_opciones');
  });
});
<!doctype html>
<html lang="es">

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>

<body>
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-12">
        <button id="btn_nuevo_boton" type="button" class="btn btn-secondary">Agregar</button>
      </div>
    </div>
    <br/>
    <div class="row">
      <div class="col-md-12" id="div_contenido">

      </div>
    </div>
  </div>
</body>

</html>

<!-- Modal -->
<div class="modal fade" id="modal_agregar" tabindex="-1" role="dialog" aria-labelledby="ModalAgregar" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-row justify-content-md-center">
          <div class="form-group col-lg-5">
            <label for="lista_opciones">Disponibles</label>
            <select class="form-control" name="lista_opciones" id="lista_opciones" multiple size="5">
              <option value="1">Opción 1</option>
              <option value="2">Opción 2</option>
              <option value="3">Opción 3</option>
              <option value="4">Opción 4</option>
              <option value="5">Opción 5</option>
            </select>
          </div>
          <div class="form-group col-lg-1 text-center">
            <label for="acciones">Acciones</label>
            <br/>
            <button type="button" class="btn btn-secondary pasar">Pasar</button>
            <br/>
            <br/>
            <button type="button" class="btn btn-secondary quitar">Quitar</button>
          </div>
          <div class="form-group col-lg-5">
            <label for="lista_seleccionado">Seleccionados</label>
            <select class="form-control" name="lista_seleccionado" id="lista_seleccionado" multiple size="5" reequired>
            </select>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-primary btn_confirmar">Agregar</button>
      </div>
    </div>
  </div>
</div>

Muchas gracias a todos por su tiempo.
Esta es mi primera pregunta y espero haberlo hecho bien.

1 respuesta 1

1

El problema ocurre por un error que se ve a menudo en el sitio: estás creando un controlador de evento para un elemento (el click de .btn_confirmar) dentro del controlador de evento de otro elemento ( el click de .btn_agregar_opciones).

Eso hará que cada vez que se pulse en el botón de Agregar Opciones, se asocie una nueva función al botón de Confirmar. Para el primer elemento se ejecutar n veces, para el segundo n-1 veces, ..., y para el n-ésimo elemento se ejecutará 1 vez.

La solución es sencilla: saca la definición del controlador de evento para .btn_confirmar fuera de donde está para que sólo se ejecute una vez (puedes usar eventos delegados como haces para .btn_agregar_opciones).

Con ese cambio, el código se verá así:

Nota: se seguirán añadiendo múltiples tablas si editas una opción, no sé si lo haces porque quieres hacerlo así o porque simplemente no borras la tabla... pero debería ser un cambio sencillo.

$(document).ready(function() {

  // tendrás que sacar la definición de `abuelo` porque ahora es compartida
  var abuelo = null;

  //Agregar nuevo botón
  $("#btn_nuevo_boton").click(function() {
    $("#div_contenido").append(
      '<div class="form-row">' +
      '<div class="form-group col-md-12">' +
      '<button type="button" class="btn btn-primary btn_agregar_opciones">Agregar opciones</button>' +
      '</div>' +
      '</div>'
    );
  });

  //Si se da clic a algún botón creado dinámicamente
  $("#div_contenido").on("click", ".btn_agregar_opciones", function() {
    //Variable que almacena el 'nodo abuelo' del botón al que se dio clic
    abuelo = $(this).parents(':eq(1)');
    $('#modal_agregar').modal('toggle');
    
  });
  
  // Saca esta función fuera y hazla delegada
  //Botón que esta dentro del Modal
  $(".modal-content").on("click", '.btn_confirmar', function() {
    //Variable que concatena el código HTML para ser insertado al final
    var tabla = '<table class="table table-borderless table-sm">';
    $("#lista_seleccionado option").each(function() {
      tabla += '<tr>' +
        '<td class="mini-td">' + $(this).text() + '</td>' +
        '</tr>';
    });
    tabla += '</table>';
    //Se agrega el contenido de la variable al DOM
    abuelo.append(tabla);
    $('#modal_agregar').modal('toggle');
  });

  //Pasar opciones entre listas del Modal
  $('.pasar').click(function() {
    return !$('#lista_opciones option:selected').remove().appendTo('#lista_seleccionado');
  });
  $('.quitar').click(function() {
    return !$('#lista_seleccionado option:selected').remove().appendTo('#lista_opciones');
  });
});
<!doctype html>
<html lang="es">

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>

<body>
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-12">
        <button id="btn_nuevo_boton" type="button" class="btn btn-secondary">Agregar</button>
      </div>
    </div>
    <br/>
    <div class="row">
      <div class="col-md-12" id="div_contenido">

      </div>
    </div>
  </div>
</body>

</html>

<!-- Modal -->
<div class="modal fade" id="modal_agregar" tabindex="-1" role="dialog" aria-labelledby="ModalAgregar" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-row justify-content-md-center">
          <div class="form-group col-lg-5">
            <label for="lista_opciones">Disponibles</label>
            <select class="form-control" name="lista_opciones" id="lista_opciones" multiple size="5">
              <option value="1">Opción 1</option>
              <option value="2">Opción 2</option>
              <option value="3">Opción 3</option>
              <option value="4">Opción 4</option>
              <option value="5">Opción 5</option>
            </select>
          </div>
          <div class="form-group col-lg-1 text-center">
            <label for="acciones">Acciones</label>
            <br/>
            <button type="button" class="btn btn-secondary pasar">Pasar</button>
            <br/>
            <br/>
            <button type="button" class="btn btn-secondary quitar">Quitar</button>
          </div>
          <div class="form-group col-lg-5">
            <label for="lista_seleccionado">Seleccionados</label>
            <select class="form-control" name="lista_seleccionado" id="lista_seleccionado" multiple size="5" reequired>
            </select>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-primary btn_confirmar">Agregar</button>
      </div>
    </div>
  </div>
</div>

1
  • Muchísimas gracias Alvaro Montono, sabia que el problema estaba dentro del primer controlador de evento, intente solucionarlo pero nunca se me ocurrió tu respuesta, no se porque en mi mente, todo tenia que ir "anidado". Y con respecto a que se seguirán añadiendo mas tablas, es una muy buena observación, lo tengo presente solo que aun no llegaba a esa parte, fallo mio. De verdad muchísimas gracias.
    – Arreguin92
    Commented el 22 ene. 2019 a las 21:30

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.