Skip to main content
se eliminaron 47 caracteres en el cuerpo
Origen Enlace
Arreguin92
  • 628
  • 5
  • 14

Buen día comunidad de Stack Overflow este es mi primera pregunta y espero hacerlo bien. Bueno al grano.

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

Buen día comunidad de Stack Overflow este es mi primera pregunta y espero hacerlo bien. Bueno al grano.

Muchas gracias a todos por su tiempo.

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

Origen Enlace
Arreguin92
  • 628
  • 5
  • 14

El nodo HTML que agrego tambien es agregado a bloques de elementos HTML anteriores

Buen día comunidad de Stack Overflow este es mi primera pregunta y espero hacerlo bien. Bueno al grano.

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.