动态加载时手风琴不工作

Question

我正在尝试创建一个由 API 查询填充的动态手风琴，但它似乎不起作用。在 HTML 加载时，它看起来像手风琴，但当我点击它时，它不会展开。

<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 class="accordion">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 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>`);
    });
  }).fail(function(request, error) {
    console.log(error);
  }).always(function() {});

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

Answer 1

只需将 $('#job_accordion').accordion(); 放在 ajax 请求的末尾，如果成功，则元素 'converted' 直接添加到手风琴中 DOM

注意：出于演示目的我删除了$.get()

$(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 class="accordion">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 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>`);
  });
//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>

在您的情况下，您的代码必须如下所示：

逻辑：当响应成功时，你将你的#job_accordiondiv转换为jQueryUI手风琴

$(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 class="accordion">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 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>`);

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


});

动态加载时手风琴不工作

Accordion not working when dynamically load

javascript

html

jquery

accordion