Accordion not working when dynamically load-CodePudding

I'm trying to create a dynamic accordion populated by an API query but it doesn't seem to be working. On HTML load its looks like an accordion but when I click on it, it wont expand.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="job_accordion"></div>

$(document).ready(function() {
  $.get("https://api.source.com/open/jobs/?page_size=1000").done(function(data) {
    let jobs_list = data.results.sort((a, b) => (a.organization_name > b.organization_name) ? 1 : -1)
    console.log(jobs_list);

    //<button >Animation</button>
    let department_name = "";
    $.each(jobs_list, function(index, job) {
      let department_id = job.organization_name.toLowerCase();
      if (department_name != job.organization_name) {
        $('#job_accordion').append(`
          <button >${job.organization_name}</button>
          <div >
            <ol id="${department_id}_list"></ol>
          </div>`);
        department_name = job.organization_name;
      }
      $(`#${department_id}_list`).append(`
        <li>
          <button type="button"  data-toggle="modal" data-target="#job_modal">${job.position_name}</button>
        </li>`);
    });
  }).fail(function(request, error) {
    console.log(error);
  }).always(function() {});

  $("#job_accordion").accordion();
});

CodePudding user response：

Simply put your $('#job_accordion').accordion(); at the end of your ajax request if success then element is 'converted' to accordion directly after it append DOM

NOTE: I remove the $.get() for demo purpose

$(document).ready(function() {
  let data = {
    results: [{
        organization_name: "test",
        position_name: "pos"
      },
      {
        organization_name: "test2",
        position_name: "pos2"
      },
    ]
  };
  let jobs_list = data.results.sort((a, b) => (a.organization_name > b.organization_name) ? 1 : -1)
  //console.log(jobs_list);

  //<button >Animation</button>
  let department_name = "";
  $.each(jobs_list, function(index, job) {
    let department_id = job.organization_name.toLowerCase();
    if (department_name != job.organization_name) {
      $('#job_accordion').append(`<button >${job.organization_name}</button>
                                        <div >
                                            <ol id="${department_id}_list">
                                            </ol>
                                        </div>`);
      department_name = job.organization_name;
    }
    $(`#${department_id}_list`).append(`<li>
                                                        <button type="button"  data-toggle="modal" data-target="#job_modal">
                                                        ${job.position_name}
                                                        </button>
                                                    </li>`);
  });
//Put accordion here
$("#job_accordion").accordion();
})

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<script src="https://cdnjs.cloudf*emphasized text*lare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="job_accordion">

</div>

In your case, your code must look like that:

Logic: Your transform you #job_accordion div to jQuery UI accordion when the response is success

$(document).ready(function() {
  $.get("https://api.source.com/open/jobs/?page_size=1000").done(function(data) {
    let jobs_list = data.results.sort((a, b) => (a.organization_name > b.organization_name) ? 1 : -1)
    console.log(jobs_list);

    //<button >Animation</button>
    let department_name = "";
    $.each(jobs_list, function(index, job) {
      let department_id = job.organization_name.toLowerCase();
      if (department_name != job.organization_name) {
        $('#job_accordion').append(`
          <button >${job.organization_name}</button>
          <div >
            <ol id="${department_id}_list"></ol>
          </div>`);
        department_name = job.organization_name;
      }
      $(`#${department_id}_list`).append(`
        <li>
          <button type="button"  data-toggle="modal" data-target="#job_modal">${job.position_name}</button>
        </li>`);

    });
    //Put you .accordion() here
    $("#job_accordion").accordion();
  }).fail(function(request, error) {
    console.log(error);
  }).always(function() {});


});