動態加載時手風琴不起作用

我正在嘗試創建一個由 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 >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();
});

uj5u.com熱心網友回復：

$('#job_accordion').accordion();如果成功，只需將您的 ajax 請求放在末尾，然后元素在附加 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 >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>

在您的情況下，您的代碼必須如下所示：

邏輯：當回應成功時，您將 #job_accordion div 轉換為 jQuery UI 手風琴

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


});

標籤：javascript html 查询 手风琴

上一篇：僅復制非空單元格

下一篇：檢測來自React應用程式和React組件之外的html元素的點擊