Tabellenzeile löschen mit jQuery

Question

der Code unten addiert und Tabellenzeile mit Hilfe von JQuery die Add-Funktion funktioniert gut zu entfernen, aber das Entfernen nur funktionieren, wenn ich

<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> 

und das Skript die erste Zeile entfernen

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

Kann mir jemand die Erklärung geben, warum ich nur die erste Reihe entfernen kann? danken so viel

Answer 1

Sie benötigen Ereignis Delegation verwenden, da diese Tasten auf Last existieren nicht:

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

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

Answer 2

Beim Klonen, die standardmäßig wird es nicht die Ereignisse klonen. Den hinzugefügten Zeilen ist kein Ereignishandler zugeordnet. Wenn Sie clone(true) anrufen, dann sollte es sie auch behandeln.

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

Answer 3

Eine einfache Lösung ist Code von Tastenereignis in einer Funktion kapseln, und es nennen, wenn Sie TRs zu addieren:

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

Verwendet Ereignis Delegation, becouse Sie erstellen dynamische Zeilen.

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

Das perfekt funktioniert, nehmen Sie nicht von document.body