Dynamically Construct an accordion, and triggering it - jQuery

Question

I have 3 actions buttons

I've followed this documentation https://getbootstrap.com/docs/4.3/components/collapse/

This is my (i) button

Then, I also have this

$('.stats-modify-btn').click(function() {

    console.log($(this).attr("data-device-mac"));

    var deviceMac = $(this).attr("data-device-mac");
    var title = $(this).attr("title");

    var infoAccordion = `
    
    
    ${device.display_activity}
    
    
    `;

    if(title == "Device Info"){
        console.log('show Device Info');

        $('#tr-'+ deviceMac).append(infoAccordion).show();
    }

});

I have no idea why the accordion is not triggering.

Is it try to triggering but the actual DOM is not yet there? How do I make sure ?

user_10606400 · Answer

You can check #tr-BCAEC5DA2D87 has any div inside it i.e : collapse or not and if length is 0 then append new div inside it .Also , you need to use this condition so that no mutliple elements are appended inside your divs.

Demo Code :

$('.stats-modify-btn').click(function() {
  var device = {
    "device_mac": "BCAEC5DA2D87"
  }
  var deviceMac = $(this).attr("data-device-mac");
  var title = $(this).attr("title");
  //check if the div has .collapse inside it
  if ($('#tr-' + deviceMac + " .collapse").length == 0) {
    var infoAccordion = `
    
    
    somethingss
    
    
    `;
    if (title == "Device Info") {
      $('#tr-' + deviceMac).append(infoAccordion)
    }
  }
});

Dynamically Construct an accordion, and triggering it - jQuery

1 Answers