Javascript: Unable to get element ID on table with multiple rows

Question

I have a table where I add rows on button click. But I am not able to detect input from the added rows. Would appreciate some advice. I tried the other resolutions on the site but I guess I am doing something wrong. On button click, I have the following happen in jquery

$("#addrow").on("click", function () {
    var newRow = $("<tr>");
    var cols = "";

    cols += '<td><input type="text" class="ns form-control" id="serial' + counter + '"/><ul id="suggestions' + counter + '"</ul></td>';
    cols += '<td><input type="text" disabled class="nl custom-select mr-sm-2" id="location' + counter + '"/></td>';
    cols += '<td><input type="text" readonly class="nw form-control" id="ward' + counter + '"/></td>';
    cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " id="btndelete" value="Delete"></td>';
    cols += '<td><input type="button" class="ibtnChekout btn btn-md btn-warning "  id="btnCheckOut" value="Check-out"></td>';
    cols += '<td><input type="button" class="ibtnChekIn btn btn-md btn-primary "  id="btnCheckIn" value="Check-in"></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    counter++;
});

so my new row will have id=serial1 and keep adding. I want to detect user input on the additional rows[serial1, serial2, serial3].

Also note that your `btndelete`, `btnCheckOut`, and `btnCheckIn` buttons *also* need to either not have `id` values, or have unique ones. Currently they all have the same `id`. — T.J. Crowder, Dec 02 '19 at 16:10

score 4 · Accepted Answer · answered Dec 02 '19 at 16:13

Usually when you're assigning individual IDs to lots of elements in rows, it means you want to step back and look at doing things differently.

If you're trying to refer to those elements from handlers for click events on the button, you don't need IDs at all. You can use event delegation on the table instead, like this:

$("selector-for-your-table").on("click", ".ibtnDel", function() {
    var row = $(this).closest("tr");
    var serial = row.find("input[name=serial]");
    // ...
});

...and similar for the ibtnChekout (sic) and ibtnChekIn buttons.

Note that in there I've assumed you'll have name="serial" on the input which is currently getting id="serialN".

Thank You Thank you Thank you. – edcoder Dec 02 '19 at 16:27 — edcoder, Dec 02 '19 at 16:27

sochas · Answer 2 · 2019-12-02T16:14:48.960

0

You need to refer an existing element for manage events on dynamically added elements.

    $("document").on("click", "#addrow", function () {
    var newRow = $("<tr>");
    var cols = "";

    cols += '<td><input type="text" class="ns form-control" id="serial' + counter + '"/><ul id="suggestions' + counter + '"</ul></td>';
    cols += '<td><input type="text" disabled class="nl custom-select mr-sm-2" id="location' + counter + '"/></td>';
    cols += '<td><input type="text" readonly class="nw form-control" id="ward' + counter + '"/></td>';
    cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " id="btndelete" value="Delete"></td>';
    cols += '<td><input type="button" class="ibtnChekout btn btn-md btn-warning "  id="btnCheckOut" value="Check-out"></td>';
    cols += '<td><input type="button" class="ibtnChekIn btn btn-md btn-primary "  id="btnCheckIn" value="Check-in"></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    counter++;
});

Check this link

edited Dec 02 '19 at 16:14

answered Dec 02 '19 at 16:11

sochas

2,271
1
11
12

4

Code dumps are not *useful* answers. Say *what* you did, *why*, and *how* it helps. – T.J. Crowder Dec 02 '19 at 16:13
I was edditing my answer as you can see while you were vote me down :( – sochas Dec 02 '19 at 16:16
1. Don't post and then edit to make the answer complete. Write a complete answer, *then* post. 2. Your answer isn't downvoted. If it was downvoted at some point and then they changed their mind, well, don't make assumptions. It's very common for one person to comment and a *different* person to downvote. 3. Comments complaining about voting on SO are almost **never** a good idea. – T.J. Crowder Dec 02 '19 at 16:28

Javascript: Unable to get element ID on table with multiple rows

2 Answers2