Accordion inside HTML table stops working if preceded by 5 seconds API call-CodePudding

I have a table, in which the rows expand in their own tables. My goal is to be able to dynamically form these rows, then input information into them. However, when I precede the JQuery append function with the 5 second long API call or function that will get me this information, The rows continue to load in, but do not retain their ability to be expanded. I can't seem to figure out why this is happening.

Here is the working version (No API call): https://jsfiddle.net/5z9w3Lkx/19/

for(i = 0; i < 4 ; i  ){

Here is the failing version (With API call): https://jsfiddle.net/5z9w3Lkx/18/

async function startup(){
 stuff = await get_data()
  console.log(stuff.length)
  for(i = 0; i < stuff.length ; i  ){

As you can see, the difference between the two JSfiddles is that the first 3 lines of startup() are commented out, and the forloop is changed from stuff.length to an integer literal.

Thanks for any help!

CodePudding user response：

Reason for that is that you set listener on certain DOM nodes when new one are not loaded. Event delegation shown above would help.

$(function(){
$(".fold-table").on("click", function(){
    let tr = event.target.closest('tr');

    $(tr).toggleClass("open").next(".fold").toggleClass("open");
  });
});