cancellare riga della tabella utilizzando jQuery

Question

il codice qui sotto aggiungere e rimuovere riga della tabella con l'aiuto di jQuery funzione add funziona bene, ma la rimozione funzionano solo se mi tolgo la prima fila

<table> 
    <tr> 
    <td><button type="button" class="removebutton" title="Remove this row">X</button> 
</td> 
     <td><input type="text" id="txtTitle" name="txtTitle"></td> 
     <td><input type="text" id="txtLink" name="txtLink"></td> 
    </tr> 
</table> 
<button id ="addbutton">Add Row</button> 

e lo script

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; 
}); 

qualcuno può darmi la spiegazione del motivo per cui posso rimuovere solo la prima riga? grazie mille

Answer 1

È necessario utilizzare la delega evento perché non esistono quei pulsanti sul carico:

http://jsfiddle.net/isherwood/Z7fG7/1/

$(document).on('click', 'button.removebutton', function() { // <-- changes 
    alert("aa"); 
    $(this).closest('tr').remove(); 
    return false; 
}); 

Answer 2

Quando la clonazione, per impostazione predefinita è non clonare gli eventi. Le righe aggiunte non hanno un gestore eventi collegato a loro. Se chiami clone(true) allora dovrebbe gestirli pure.

http://api.jquery.com/clone/

Answer 3

Una soluzione semplice è incapsulare il codice di evento tasto in una funzione, e lo chiamano quando si aggiunge TR troppo:

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(); 

http://jsfiddle.net/Z7fG7/2/

Answer 4

Usa delegazione evento, siccome stai creando righe dinamiche.

$(document).on('click','button.removebutton', function() { 
    alert("aa"); 
    $(this).closest('tr').remove(); 
    return false; 
}); 

Live Demo

Answer 5

$(document.body).on('click', 'buttontrash', function() { // <-- changes 
    alert("aa"); 
    /$(this).closest('tr').remove(); 
    return false; 
}); 

Questo funziona perfettamente, non di prendere document.body