0

Cree la siguiente tabla :

<table id="tabla1">
      <tr id="fila0">
        <th>DNI</th>
        <th>NOMBRE</th>
        <th>TELEFONO</th>
        <th>ACCION</th>
      </tr>
      <tr id="fila1">
        <th><p>1111111A</p></th>
        <th><p>Administrador</p></th>
        <th><p>555-000-111</p></th>
        <th><button class="eliminar">Eliminar</button></th>
      </tr>
      <tr id="fila2">
        <th><p>1111111B</p></th>
        <th><p>Administrador</p></th>
        <th><p>555-000-111</p></th>
        <th><button class="eliminar">Eliminar</button></th>
      </tr>
    </table>

<br />
    <button class="añadir">Añadir Contacto</button>

Y luego utlizo las siguientes funciones para eliminar y añadir contactos a mi tabla :

<script>
      $(function () {
        console.log("LEO");

        $(".eliminar").click(function () {
          var id = Number($(this).closest("tr").prop("id").slice(-1));
          $("#fila" + id).remove();
        });


        $(".añadir").click(function () {
          var index = $("table tr").length;

          $("#tabla1").append(
            `<tr id=fila${index}> <th><p>1111111C</p></th>
        <th><p>Administrador</p></th>
        <th><p>555-000-111</p></th>
        <th><button class="eliminar">Eliminar</button></th></tr>`
          );
          console.log("Numero de Rows", index);
        });
      });
    </script>

EL problema es que la row nueva que cree con $(".añadir") no me funciona, supuestamente si doy en el boton Eliminar deberia entrar a la funcion $(".eliminar") pues el boton tiene la clase eliminar. Pero en la practica no hace nada la funcion $(".eliminar") si me funciona con los dos primeros elementos que cree y el boton cuando se añade coje los estilos de la clase "eliminar"

1 respuesta 1

0

No funciona debido a que cuando se añade un elemento al DOM usando el método append(), after(), before(), html(), appendto(), etc ..., los respectivos elementos no tiene eventos asociados en el disparador de los navegadores, debido a que los eventos se le asocian a los botones y demás elementos en el ready() de jQuery. Esto lo suplen los framework mas modernos como Vue ya que virtualizan el DOM entre otros trucos para que funcione perfectamente.

Afortunadamente para este problema la solución en jQuery es la siguiente

<script>
      $(function () {
        console.log("LEO");

        $("body").on('click' , '.eliminar' , function () {
          var id = Number($(this).closest("tr").prop("id").slice(-1));
          $("#fila" + id).remove();
        });


        $("body").on('click' , '.añadir' , function () {
          var index = $("table tr").length;

          $("#tabla1").append(
            `<tr id=fila${index}> <th><p>1111111C</p></th>
        <th><p>Administrador</p></th>
        <th><p>555-000-111</p></th>
        <th><button class="eliminar">Eliminar</button></th></tr>`
          );
          console.log("Numero de Rows", index);
        });
      });
    </script>
1
  • Gracias ahora entiendo cual era el problema, me fue de mucha ayuda el comentario. Saludos
    – FireStorm
    el 19 sep. 2021 a las 11:11

Tu Respuesta

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

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