Question

执行查询后，添加了一个表行，不错，它为用户提供了删除按钮删除该行的选项，这是当事情开始变得挑剔时，任何与附加tr相关的函数刚刚赢了'即使我将button.click更改为整个tr，它也会删除标题tr和每个其他表tr除了附加的那些！

为了澄清，该表位于不是#codbar

的表单中

$('#codbar').submit(function(e)
    {
        e.preventDefault();
        $.ajax(
        {
            url: "/GoogleStore/ajax/venta.php",
            data: {'iditem': $('#id-item').val()},
            dataType: "json",
            type: "GET",
            success: function (data, status, jqXhr)
            {
                var i = 0;
                var end = parseInt($('input[name = "contador"]').val());
                for(i = 0; i <= end; i++)
                {
                    if($('input[name = "cod'+i+'"]').length && $('input[name = "cod'+i+'"]').val() == data["Cod"])
                    {
                        $('input[name = "cant'+i+'"]').val(parseInt($('input[name = "cant'+i+'"]').val()) + 1);
                        $('span[name = "total'+i+'"]').text(parseFloat($('input[name = "cant'+i+'"]').val()) * parseFloat($('input[name = "precio'+i+'"]').val()));
                        i = end;
                    }
                    else if(i == end)
                    {
                        $('input[name = "contador"]').val();
                        $('table[name = "venta"]').find('tbody').append($('<tr><td><span>'+data["Prod"]+'</span></td><td><input type="hidden" name="cod'+i+'" value="'+data["Cod"]+'"><span>'+data["Cod"]+'</span></td><td><input type="text" name="cant'+i+'" value="1"></td><td><input type="hidden" name="precio'+i+'" value="'+data["Precio"]+'"><span>'+data["Precio"]+'</span></td><td><span name="total'+i+'">'+data["Precio"]+'</span></td><td><input type="button" class="red" name="DeleteRow" value="Eliminar"></td></tr>'));
                        $('input[name = "contador"]').val(end + 1);
                    }
                }
            },
            error: function (jqXhr, textStatus, errorThrown)
            {
                console.log("Error response:", jqXhr.responseText);
            }
        });
    });

    $("input[name = 'DeleteRow']").click(function()
    {
        alert('');
        $(this).closest('tr').fadeOut('slow', function()
        {
            $(this).closest('tr').remove();
        });
    });

Answer 1

您需要将事件委托给静态父级：

$(document).on('click', "button[value = 'Eliminar']", function()

如上所述更改为此。

因为您要动态追加tr所以在静态元素上注册的任何事件都不会绑定在新创建的元素上。

Answer 2

试试这个

 $("table[name = "venta"]").on("click","button[value = 'Eliminar']",function()
    {
        alert('');
        $(this).closest('tr').fadeOut('slow', function()
        {
            $(this).closest('tr').remove();
        });
    });

jQuery：将tr追加到表tbody可以防止tr单击函数

2 个答案: