jqueryでJPanelを動的に作成する方法は？

Question

折りたたみパネルにxmlコンテンツから動的にjPanelを使用しようとしていますが、動的に作成されたパネルは表示されません。これはあまりにも

私を助け

：

<div id="detailTable" style="width:100%;"> 

</div> 

<!--Creating panels (Same thing if i create manually it is created, see the image)--> 
<div title="General Properties" class="class"> 
      ad 
</div> 
<div title="Other Properties" class="class"> 
    ad1 
</div> 

のjQuery

$('.class').jPanel({ 
     'effect' : 'fade', 
     'speed'  : 'slow', 
     'easing' : 'swing' 
    }); 


//when the user clicks on `Server` (left hand side) the below code is triggered 
$('#detailTable').empty(); 
    $('<div>') 
    .html('<div class="titleBlue">Configuration&gt;'+productname+'&gt;Server</div>'+ 
      '<div title="General Properties" class="class">'+ //Creating panels dynamically 
       '<table style="border:#2F5882 1px solid;width:100%;" cellspacing="1" cellpadding="1">'+ 
        '<tbody>'+ 
         '<tr>'+ 
          '<th style="width:22%" align="left">Version</th>'+ 
          '<td style="align="left">'+infa9_pm_version+'</td>'+ 
         '</tr>'+ 
        '</tbody>'+ 
       '</table>'+ 
      '</div>'+ 
      '<div title="Other Properties" class="class">'+ 
       '<table style="border:#2F5882 1px solid;width:100%;" cellspacing="1" cellpadding="1">'+ 
        '<tbody>'+ 
         '<tr>'+ 
          '<th style="width:22%" align="left">Home</th>'+ 
          '<td style="align="left">test</td>'+ 
         '</tr>'+ 
        '</tbody>'+ 
       '</table>'+ 
      '</div>')  
    .appendTo('#detailTable'); 

更新に

マイ容器の下の画像を参照してください。

$('#detailTable').empty(); 
    $('<div>') 
    .html('')  
    .appendTo('#detailTable').delay(10).queue(function(){ 
     $('.class').jPanel({ 
      'effect' : 'fade', 
      'speed'  : 'slow', 
      'easing' : 'swing' 
     }); 
    }); 

Answer 1

コンテンツを動的に追加するときは、JQuery liveを使用する必要があります。

クリック上のクラスへのJPanelを関連付けるプロトタイプ -

$('.class').live('click', function(){ 
    $(this).jPanel({ 
     'effect' : 'fade', 
     'speed'  : 'slow', 
     'easing' : 'swing' 
    });.focus(); 
    $(this).removeClass('class'); 
}); 

jQueryのtriggerを使用するプログラムでトリガするには。あなたは、次のような場合には（限り、動的なコンテンツがバックAJAXや呼び出しによって生成されていないような動的コンテンツの後に開始パネルを持って行うことができます

$('.class').trigger('click'); 

Answer 2

は、Ajaxの成功またはコールバックでJPanelのメソッドを開始します方法）。ここで、セレクタを使用して、パネルに使用するクラスまたはIDであること、私のように遅延およびキューを使用して好みではないだろうが目的は、異なる

$('#detailTable').empty(); 
$('<div>') 
.html('')  
.appendTo('#detailTable').find('selector').jPanel({ 
     'effect' : 'fade', 
     'speed'  : 'slow', 
     'easing' : 'swing' 
    }); 

entireleyある私は次のJPanelのリリースでは、これらのシナリオのデフォルトハンドラを実装しようとします。