1

나는이 효과를 얻기 위해 노력하고있어 :왜 아코디언은 단 한 번 작동합니까?

enter image description here

나는 모든 것이 잘 작동 처음으로 대화 상자를 열 때. 그러나 나는 이것이 내가 볼 것입니다 다시 대화 상자를 닫고 여는 경우 :

enter image description here

누군가가 그것을 해결하는 방법을 알고 있습니까?

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> 

코멘트에 대답하려면이 열린 아코디언의 모양 (내가 대화 상자를 열 단지 처음이다 이것은 내 코드의 일부입니다 상자) : 닫을 때

enter image description here

당신은 내부의 데이터를 변경하기 전에 아코디언을 파괴해야
+0

처음 열 때 어떻게 보이는지 보여 줄 수 있습니까? 처음에는 무엇을 보는지, 그리고 두 번째 관점에서는 무엇을 볼 수 없기 때문입니다. –

+1

@HimanshuUpadhyay 첫 번째 이미지가 처음으로 표시되고 아코디언이 작동합니다. 두 번째 이미지는 다시 열 때 아코디언이 작동하지 않는다는 것을 보여줍니다. –

+0

안녕하세요 @HimanshuUpadhyay. 첫 번째 인쇄 화면이 처음입니다. 그래서 그것은 내가 필요한 것입니다. 두 번째로 보는 대신 두 번째 인쇄 화면이 표시됩니다. html의 구조가 올바르지 만 아코디언이 작동하지 않습니다. –

답변

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 는 참조 문제 때문에이 질문은 대화를 포함 사실, 하지 중복 있습니다 않습니다.

+1

완벽한! 그것은 작동합니다! 고마워. 나는 오늘 아침에 3 시간을 잃었다! :) –

+0

알아낼 시간이 좀 걸렸습니다. 다른 질문이 아니면 잃어 버렸을 것입니다. –