el código a continuación agrega y elimina la fila de la tabla con la ayuda de Jquery, la función de agregar funciona bien pero la eliminación solo funciona si elimino la primera fila
y el guion
var i = 1; $("#addbutton").click(function() { $("table tr:first").clone().find("input").each(function() { $(this).val('').attr({ 'id': function(_, id) {return id + i }, 'name': function(_, name) { return name + i }, 'value': '' }); }).end().appendTo("table"); i++; }); $('button.removebutton').on('click',function() { alert("aa"); $(this).closest( 'tr').remove(); return false; });
¿Alguien puede darme la explicación de por qué solo puedo eliminar la primera fila? muchas gracias
Debe usar la delegación de eventos porque esos botones no existen en la carga:
http://jsfiddle.net/isherwood/Z7fG7/1/
$(document).on('click', 'button.removebutton', function () { // <-- changes alert("aa"); $(this).closest('tr').remove(); return false; });
Utiliza la delegación de eventos, ya que está creando filas dinámicas.
$(document).on('click','button.removebutton', function() { alert("aa"); $(this).closest('tr').remove(); return false; });
Demo en vivo
Al clonar, de manera predeterminada no clonará los eventos. Las filas agregadas no tienen un controlador de eventos adjunto. Si llamas a clone(true) entonces debería manejarlos también.
Una solución simple es encapsular el código del evento de botón en una función y llamarlo cuando agrega TRs también:
var i = 1; $("#addbutton").click(function() { $("table tr:first").clone().find("input").each(function() { $(this).val('').attr({ 'id': function(_, id) {return id + i }, 'name': function(_, name) { return name + i }, 'value': '' }); }).end().appendTo("table"); i++; applyRemoveEvent(); }); function applyRemoveEvent(){ $('button.removebutton').on('click',function() { alert("aa"); $(this).closest( 'tr').remove(); return false; }); }; applyRemoveEvent();
$(document.body).on('click', 'buttontrash', function () { // <-- changes alert("aa"); /$(this).closest('tr').remove(); return false; });
Esto funciona perfectamente, toma no de document.body