如何捕捉jQuery的點擊事件，動態創建的按鈕

Question

我有HTML表格，我可以創建dinamically新行。隨着每一行，我也創建一個按鈕，我可以刪除剛剛創建的行。但jQuery不會捕獲在dinamically創建的行中的事件。 HTML代碼：

<table> 
... 
<tbody id="nuevo_producto"> 
    <tr id="1"> 
     <td><input type = "hidden" name = "tabla-1">1</td> 
     <td><input readonly="readonly" class = "form-control" placeholder = "Ref." type = "text" size = "15" id = "modelo_ref_1" name = "modelo_ref_1" value="122"></td> 
     <td><input class = "form-control" placeholder = "Ref. C" type = "text" size = "15" id = "modelo_refc_1" name = "modelo_refc_1" value="231"></td> 
     <td><input class = "form-control" placeholder = "Modelo" type = "text" size = "60" id = "modelo_modelo_1" name = "modelo_modelo_1" value="sadsadsad"></td> 
     <td><input class = "form-control" placeholder = "PVP" type = "text" size = "15" id = "modelo_pvp_1" name = "modelo_pvp_1" value="12"></td> 
     <td><button class="btn btn-default delete_row" id="1" value="eliminar_fila"><span class="glyphicon glyphicon-minus"></span></button></td> <!-- Button to delete row --> 
    </tr> 
    <tr id="2"> 
    ... <!--another rows that I have created dinamically--> 
    </tr> 
    ... 
</tbody> 
</table> 

jQuery代碼刪除剛纔單擊

$(".delete_row").each(function() { 
    $(this).on("click", function(e) { 
     e.preventDefault(); 
     $("tr#" + $(this).attr("id")).remove(); 
    }); 
}); 

的問題是，事件按鈕僅與現有行工作的行。如果我創建一個新行，「點擊」事件不起作用。

Answer 1

您需要使用Event Delegation

$('#nuevo_producto').on('click','.delete_row',function(){ 
    $("tr#" + $(this).attr("id")).remove(); 
}); 

.on()

---

Two HTML elements with same id attribute: How bad is it really?

ID必須是唯一的

---

更改HTML

<tr id="1"> 

到

<tr data-id="1"> 

不是使用

$('#nuevo_producto').on('click','.delete_row',function(){ 
    $('tr[data-id="'+$(this).data('id')+'"]').remove(); 
}); 

---

或

變化

<button class="btn btn-default delete_row" id="1" 

到

<button class="btn btn-default delete_row" data-id="1" 

不是使用

$('#nuevo_producto').on('click','.delete_row',function(){ 
    $('#'+$(this).data('id')).remove(); 
}); 

.data()