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

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');
    }
});

相关的问题对我很有帮助：在回调时重新初始化jquery确实注意到所引用的问题是而不是，因为这个问题涉及一个对话框。

Answer 2

--每次用户单击它时破坏和创建视图都是没有意义的。它可能适用于一个小规模的解决方案，但您绝对应该根据规范使用JQueryUI手风琴API：

在页面上启动手风琴div，使用：

$('#accordion').accordion()

然后在任何更改电话：

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

查看刷新文档