为什么手风琴只工作一次？

Question

我正在尝试获得这种效果：

当我第一次打开对话框时一切正常。但是如果我关闭对话框并再次打开它，这就是我看到的：

有人知道如何解决吗？这是我的代码的一部分：

function showLicenses(cluster_id) {
    // get licenses from window object
  var licenses = window.licenses[cluster_id];
    $('#accordion-cluster').html('');
  // sort reverse timestamp
  licenses = licenses.sort(function(a, b){
    return new Date(b.date_created) - new Date(a.date_created);
  });

  $.each(licenses, function(index, license){
    console.log(license);
    var id = license.license_id;
    var licenseNo = index + 1;
    if(licenseNo !== 1){
      //$("#accordion-cluster").append('<hr><br>')
    }
    $("#accordion-cluster").append('<h2> LICENSE ' + licenseNo + '<a class="removeLicense" style="background:#c8212f;color:white;padding:5px;margin:15px;position:absolute;top: 0;right: 0;" data-license-id="' + license.license_id + '">remove</a></h2><div>' + license.key_contents + '</div>');
  });
  $("#dialog").dialog({
      height: 500,
      width: 800,
      modal: true,
      open: function(){
          var icons = {
              header: "ui-icon-triangle-1-s",    // custom icon class
              activeHeader: "ui-icon-triangle-1-n" // custom icon class
          };
          console.log($("#accordion-cluster"));
          $("#accordion-cluster").accordion({
              collapsible : true,
              active : 'none',
              icons: icons
          });
      }
  });
  $.LoadingOverlay("hide");
}

和 HTML:

<div id="dialog" title="License Key">
    <div style="white-space: pre-wrap;" id="license-key">
         <div id="accordion-cluster">

         </div>
    </div>
</div>

回复评论，这是打开手风琴的样子（第一次打开对话框）：

Answer 1

你必须在更改里面的数据之前销毁手风琴，最好的时机是关闭对话框时：

$("#dialog").dialog({
    height: 500,
    width: 800,
    modal: true,
    open: function () {
        var icons = {
            header: "ui-icon-triangle-1-s",    // custom icon class
            activeHeader: "ui-icon-triangle-1-n" // custom icon class
        };

        $("#accordion-cluster").accordion({
            collapsible : true,
            active : 'none',
            icons: icons
        });
    },
    close: function () {
        $('#accordion-cluster').accordion('destroy');
    }
});

对我有帮助的相关问题：re-initialize jquery accordion on callback 请注意，引用的问题不是重复的，因为这个问题涉及对话。

Answer 2

每次用户单击时销毁和创建视图是没有意义的。它可能适用于小规模解决方案，但您绝对应该使用 JQueryUI accordion API 根据规格：

在页面加载时启动手风琴 div 使用：

$('#accordion').accordion()

然后在任何更改调用中：

$('#accordion').accordion( "refresh" )

查看 Docs for refresh

为什么手风琴只工作一次？

Why does the accordion works just once?

jquery

jquery-ui

accordion

jquery-ui-dialog

jquery-ui-accordion