Find Addition Dynamically Added TableRow

Question

I'm trying to find the table rows which are dynamically created rows, for example the first rows index shows in the alert with the click event provided when clicked. However when I click any other row after the first one that was dynamically added it comes back empty.

Ultimately, I would like to get the values in the rows associated textbox. first I was simply trying to find the row, Then I was going to move on to the textbox.

HTML

 <table class="table table-bordered table-framed" id="seconDTableAdd" style="display:block;height: 100%;">
                 <tbody>
                        <tr class="AddBookmarksMenuHere">
                                <td style="width: 80%;">
                                    <input type='text' id="txtTitle" name="txtTitle[]" style=" width: 300px; padding - top: 1px; height: 20px; font - size: 10px;  color: #555555; vertical - align: left; background - color: #ffffff;1px solid #cccccc;border - radius: 1px; " />
                                    <input type="hidden" name="parentType" id="parentType">
                                    <input type="hidden" name="ChildRank" id="parentType">
                                </td>
                                <td style="width: 20%;"><a onclick="AddRow()">+</a></td>
                          </tr>
                 </tbody>
  </table>

Add Row function

function AddRow() {
    var i = 2;

    var data = "<tr class='AddBookmarksMenuHere'><td style='width:80%;'><input type='text' id='txtTitle" + i + "' name='txtTitle[]' style = ' width: 300px; padding - top: 1px; height: 20px; font - size: 10px;  color: #555555; vertical - align: left; background - color: #ffffff;1px solid #cccccc;border - radius: 1px; '/></td>";
        data += "   <td style='width:20%;'><a class='RemoveThisRow' id='remCF" + i + "' onclick='RemoveRow(" + i + ")'>---</a></td></tr>";
  $('table').append(data);
    i++;
}

Find 'TableRow'

$('#seconDTableAdd').find('tr').click(function () {
     alert('You clicked row ' + ($(this).index() + 1));
});

I'm not sure what you're asking, but if you want all your event handlers to behave correctly regardless if the element was added at page load or later, use delegated handlers, see [this](https://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on) for more info. — James, Mar 01 '19 at 21:11

score 2 · Accepted Answer · answered Mar 01 '19 at 21:12

I assume, you are looking for the jQuery.on delegated syntax:

$('#seconDTableAdd').on('click', 'tr', function(e) {
    alert('You clicked row ' + ($(this).index() + 1));
});

Your code only hooks up the click event to all rows available at the time the function is called. Any dynamically added rows will not have the event attached. Instead, event delegation hooks up the click handler on the whole table. Whenever a click is performed, it is then checked, if the click occured on an element that matches the given selector from the second parameter (in your case 'tr'). Only if the selector matches the source, it will execute the event.

score 0 · Answer 2 · answered Mar 01 '19 at 21:11

What you want is binding a function to an element. Being dynamically created, you can still bind to the element that already existed in the DOM before the addition, then find within its children using the desired selector. Using jQuery:

$(‘#someId’).on(‘click’, ‘someSelector’, function () { });

Find Addition Dynamically Added TableRow

2 Answers2