jQuery: Appeding tr to table tbody prevents tr click functions

Question

After executing a query, a table row is added, good, it gives the user the option to delete that row with a Delete button, here is when things start to get fussy, any function related to the appended tr just won't work,even when I changed the button.click to a whole tr, it deletes the headers tr and every other table tr except for the appended ones!

Just to clarify, the table is inside a form that is not #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();
        });
    });

Events on dynamic HTML wont work. Either use Live or On for binding events. — Amit Soni, Mar 03 '15 at 06:32
Thank you! I didn't know that, I'm kind of a rookie to jQuery. — Jofran, Mar 03 '15 at 06:36

score 2 · Accepted Answer · answered Mar 03 '15 at 06:30

2

You need to delegate the event to the static parent:

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

change to this as above.

Because you are appending the tr dynamically so any event registered on static elements won't be bound on newly created element.

answered Mar 03 '15 at 06:30

Jai

74,255
12
74
103

It worked! Thank you, mind explaining why exactly? – Jofran Mar 03 '15 at 06:32
1

@Jofran dynamically created element wasn't part of the dom, so the event bound on a static button/dom node won't be registered for new ones. – Jai Mar 03 '15 at 06:36

score 1 · Answer 2 · answered Mar 03 '15 at 06:31

1

Try this

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

answered Mar 03 '15 at 06:31

SimarjeetSingh Panghlia

2,200
13
14

jQuery: Appeding tr to table tbody prevents tr click functions

2 Answers2