JQuery Add Row after Add Table

Question

Adding a new table function works and adding a row function works on tables that were already created on the page. However, when I try adding a row to a table that I added dynamically it does not work.

The alert for testing when I click add row does not do anything.

<script type="text/javascript>
    $(document).ready(function() {

        $(".addtable").on("click", function () {

            $(".order-list:last").each(function() {
                closesttable = $(this).closest('table').attr('id');
                tableid = closesttable.replace(/^.+-/,'');
            });
            tableid=parseInt(tableid)+1;

            var newTable = $("<div class='tableDemo'>");
            var cols = "<table id='table-"+tableid+"' class='order-list'>";

            cols += '<tbody><tr id="1"><td>'+tableid+'</td>';
            cols += '<td>1</td>';
            cols += '<td>1</td>';
            cols += '<td><input type="text" name="Quantity['+tableid+'][1]" value=""/></td>';
            cols += '<td><select name="Meal['+tableid+'][1]"><option></option><option>Chicken</option><option>Fish</option><option>Bison</option></select></td>';

            cols += "<td><input type='submit' name='Delete["+tableid+"][1]' value='Delete' id='ibtnDel' style='height: 20px;'><a class='deleteRow'></a></td></tr>";
            cols += "</tbody><tfoot><tr id='addrow1'><td colspan=5><input type='button' class='addrow' value='Add Row' style='height: 20px;'></td></tr></tfoot></table></div>";

            newTable.append(cols);

            $("#here_table").append(newTable);

            $(".addrow").on("click", function () {
                alert("new addrow clicked");
            });

        });

    });

<div id="here_table"></div>
<BR><BR>
<input type='button' class='addtable' value='Add Table'>

Also, to make dynamic, change $(".addtable").on("click", function () { to the dynamic use of on or .delegate, like: $(document).on('click', '.addtable', function(e) { OR $(document).delegate('.addtable', 'click', function(e) { — SpYk3HH
– SpYk3HH, Commented Jul 10, 2013 at 18:05

j08691 · Accepted Answer · 2013-07-10 18:05:16Z

1

Change:

$(".addrow").on("click", function () {
    alert("new addrow clicked");
});

to

$(document).on("click",".addrow", function () {
    alert("new addrow clicked");
});

See jQuery's docs on .on() for more info on event delegation.

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page.

answered Jul 10, 2013 at 18:05

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fresheyeball Over a year ago

So weird. I am starting to think that in order to downvote you should be required to leave a comment.

Collectives™ on Stack Overflow

JQuery Add Row after Add Table

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related