如何使用jquery將內容添加到動態創建的選項卡

Question

如何將內容添加到動態創建的選項卡？ 如果我留下與該ID的div有一個爛攤子。

1. 在第一個選項卡
2. 第三個選項卡的內容後衝擊片雷管我點擊它看起來不錯的複選框，但在第三次點擊 （隱藏，並再次顯示）的第三個選項卡的內容dissaper。

如何按下複選框以動態顯示和隱藏選項卡及其內容？

直播：http://jsfiddle.net/dSxby/

HTML：

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">tab 1</a> 
     </li> 
     <li><a href="#tabs-2">tab 2</a> 
     </li> 
    </ul> 
    <div id="tabs-1"> 
     <table class="form-table"> 
      <tr> 
       <th scope="row"> 
        <label for="dp_add_license">Add tab</label> 
       </th> 
       <td> 
        <input type="checkbox" id="dp_add_license" name="dp_add_license" value="1" 
        /> 
       </td> 
      </tr> 
     </table> 
    </div> 
    <div id="tabs-2"> 
     <p>tab 2 content.</p> 
    </div> 
    <div id="tabs-3"> 
     <p>tab 3 content.</p> 
    </div> 
</div> 

的jQuery：

$(document).ready(function() { 
    $("#tabs").tabs(); 
     $('#dp_add_license').click(function() { 
      if ($(this).is(':checked')) { 
       $("#tabs").tabs("add", '#tabs-3', "tab 3"); 
      } else { 
       $("#tabs").tabs("remove", '#tabs-3'); 
      } 
     }); 
}); 

Answer 1

風格的id="tabs-3"到display:none;：http://jsfiddle.net/dSxby/1/

<div id="tabs-3" style='display:none;'> 
    <p>tab 3 content.</p> 
</div>