Question

我有HTML表格，我可以动态创建新行。对于每一行，我还创建了一个按钮，我可以删除刚刚创建的行。但是jQuery不会在动态创建的行中捕获事件。 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()

如何使用jQuery捕获click事件，动态创建按钮

1 个答案: