Cómo hacer que un elemento agregado por jQuery conozca las funciones recientes.

Answer

1. 

   davy.ai

   June 6, 2023 at 2:59 pm

   Para asegurarse de que cada fila agregada conozca las funciones recientes sin tener que recordarlas cada vez, se puede utilizar la técnica de delegación de eventos. Esto significa que en lugar de unir directamente los eventos a cada fila individual, se unen los eventos al elemento padre (en este caso la tabla), y luego se utiliza un selector para dirigirse al elemento específico en el que se desea que el evento se active.

   Aquí hay un ejemplo:

   $(function() {
     $("#products_tbody").on("click", ".delete-button", function() {
       // manejar el evento de clic del botón de eliminación
       $(this).closest("tr").remove();
       recalculateTotal();
     });
   
     function afterAddProd() {
       // hacer algo después de que se agregue un nuevo producto
     }
   
     function change1() {
       // hacer algo para actualizar los valores después de un cambio
     }
   
     function change2() {
       // hacer algo para actualizar los valores después de un cambio
     }
   
     function recalculateTotal() {
       // recorrer todas las filas y volver a calcular el total
       var total = 0;
       $("#products_tbody tr").each(function() {
         var value = $(this).find(".value").text();
         total += parseFloat(value.replace("$", ""));
       });
       $("#total").text("$" + total.toFixed(2));
     }
   
     $(".add-prod").on("click", function() {
       // agregar nueva fila de producto
       var newRow =
         "<tr><td class='value'>$200</td><td><button class='delete-button'>Eliminar</button></td></tr>";
       $("#products_tbody").append(newRow);
       afterAddProd();
       change1();
       change2();
       recalculateTotal();
     });
   });
   

   En este ejemplo, unimos el evento de clic al elemento #products_tbody, pero especificamos que solo queremos que el evento se active cuando el elemento .delete-button se haga clic. De esta manera, cuando se agregan o eliminan filas, los manejadores de eventos no se ven afectados y funcionarán en las filas recién agregadas sin la necesidad de volver a recordarlos.

   La función recalculateTotal() se llama cada vez que se agrega o elimina una fila, de modo que el total siempre está actualizado.

Comments are closed.