0

I have a successful jQuery AJAX return and in the success section I create a button. It all displays correctly in the browser, but clicking on the button has no effect. I am using the recommended jQuery event delegation of jQuery.fn.on for dynamically created content and it still does not work.

Here is the relevant jQuery code containing the event delegation of $("button").on('click', function():

$(document).ready(function() {
    $("button").on('click', function() {
        alert("One of the buttons was clicked.");
    });

    const apigw_endpt = "https://blahblah.execute-api.region.amazonaws.com/api";
    $.ajax({
        url: apigw_endpt + "/return_all_cosmosdb_rcds",
        type: "GET",
        dataType: "json",
        success: function (jsonlist) {
            for (var i = 0, size = jsonlist.length; i < size ; i++) {
                $("#table_body").append('<tr>\n');
                let item = jsonlist[i];
                for (const key in item) {
                    console.log(`${key}: ${item[key]}`);
                    if (key == 'id') {
                        $("#table_body").append(`<td>${item[key]}</td>\n`);
                        rcd_id = key;
                    }
                    else if (key == 'image_fname') {
                        $("#table_body").append(`<td><button id='button_${i}'>${item[key]}</button></td>\n`);
                    } else {
                        $("#table_body").append(`<td>${item[key]}</td>\n`);
                    }
                }
                $("#table_body").append('</tr>');
            }
        },
        error: function (xhr, status, errorThrown) {
            jq_ui_alert('dialog-message', "There was an AJAX problem with the get_all_cosmosdb_rcds Lambda function.");
            console.log("Error: " + errorThrown);
            console.log("Status: " + status);
            console.dir(xhr);
        }
    });
});

The data returned from the AJAX function looks like this:

[
    {
    "id": "803035021",
    "image_fname": "004.JPG",
    "_ts": "1612994128"
    },
    {
    "id": "631573429",
    "image_fname": "021.JPG",
    "_ts": "1612994173"
    },
    {
    "id": "612593039",
    "image_fname": "4307733.png",
    "_ts": "1612994917"
    }
]

Here is the relevant html:

<table id='esnapTable' class='table table-striped' cellspacing='0' width='80%'>
    <thead>
        <tr><th>ID</th><th>Filename</th><th>TimeStamp</th></tr>
    </thead>
    <tbody id='table_body'>
    </tbody>
</table>
Brian G
  • 126
  • 1
  • 9
  • I gave you a link to the correct way to do it in your previous question. You have to use event delegation, not normal event binding. – Barmar Feb 12 '21 at 21:50
  • 1
    It should be `$("#table_body").on("click", "button", function() { ... })` – Barmar Feb 12 '21 at 21:50
  • You don't need `$("#table_body").append("")`. `append()` creates DOM nodes, it's not concatenating HTML text. You also need to append the `` to a ``, not the table. – Barmar Feb 12 '21 at 21:52
  • I have $("button").on('click', function(). Is that not event binding? – Brian G Feb 12 '21 at 22:07
  • That's event binding, not event delegation. Delegation requires you to call the `.on()` function on a static element, and put the selector for the dynamic element in the second argument. – Barmar Feb 12 '21 at 22:09

0 Answers0