动态加载API数据时Accordion手风琴组件点击无法展开问题求助

问题根因 #

问题核心是异步执行顺序错误：

• $.get 是异步网络请求，发送请求后代码会继续往下执行，你当前把 $("#job_accordion").accordion() 写在请求外部，执行初始化时接口还没返回数据，动态生成的手风琴按钮、面板DOM都还没插入到页面中，初始化找不到对应元素，自然点击没有响应。
• 额外注意：accordion 是jQuery UI的组件，你当前只引入了jQuery基础库，需要补充引入jQuery UI的样式和JS文件才能正常使用组件功能。

修复方案 #

1. 调整初始化时机 #

将手风琴初始化代码移到 $.get 的 done 回调的末尾，等所有动态DOM全部插入完成后再执行初始化。

2. 补充引入jQuery UI依赖（如果未引入） #

在你的HTML头部补充引入jQuery UI资源：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

修正后完整JS代码 #

$(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);

    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 class="accordion">${job.organization_name}</button>
          <div class="panel">
            <ol id="${department_id}_list"></ol>
          </div>`);
        department_name = job.organization_name;
      }
      $(`#${department_id}_list`).append(`
        <li>
          <button type="button" class="btn-job" data-toggle="modal" data-target="#job_modal">${job.position_name}</button>
        </li>`);
    });
    // 所有DOM插入完成后再初始化手风琴
    $("#job_accordion").accordion();
  }).fail(function(request, error) {
    console.log(error);
  });
});

内容的提问来源于stack exchange，提问作者M.Izzat