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

Question

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!

Does this answer your question? [Event handler not working on dynamic content](https://stackoverflow.com/questions/15090942/event-handler-not-working-on-dynamic-content) — Reyno, Aug 08 '22 at 07:55
This is because your click handler is not setup for dynamic content. Change it to `$(".fold-table").on("click", 'tr.view', function(){ ... });` — Reyno, Aug 08 '22 at 07:55

score 1 · Accepted Answer · answered Aug 08 '22 at 07:57

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");
  });
});

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

1 Answers1