Tengo una tabla html, cada fila (tr) tiene un valor (exp: 200 $) y un botón de eliminación, cómo hacer que cada fila agregada conozca funciones recientes sin recordarlas cada vez
$(function () { $('.add-prod').on("click", function (e) { $('#products_tbody').append('<tr >...</tr>'); afterAddProd(); change1(); change2(); }); function afterAddProd() { ... }; function change1() { ... } function change2() { ... } }porque cuando elimino una fila, el total de valores disminuirá tres veces, por ejemplo
Este es un ejemplo de delegación de eventos. Puede configurar una sola función de eliminación usando container.on(event, selector... ) de jQuery que funcionará para cualquier botón creado dinámicamente dentro de un contenedor. Aquí hay un ejemplo
$(document).ready(function() { $('.added').on('click', 'button.del', function() { $(this).closest('.item').remove(); tally() }) $('button.add').click(function() { let n = $('.tpl').clone().removeAttr('hidden').removeClass('tpl').addClass('item'); n.find('input.qty').val(Math.floor(Math.random() * 100)); n.appendTo($('.added')) tally() }) function tally() { let ttl = 0; $('.added input.qty').each(function() { ttl += +$(this).val() }) $('.ttl').html(ttl) } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class='add'>add</button> <div class='added'> </div> <strong> total: <span class='ttl'></span></strong> <div class='tpl' hidden> This is the new data <input type='number' class='qty' /> <button class='del'>delete</button> </div>