如何使用jquery向动态创建的选项卡添加内容

Question

如何将内容附加到动态创建的标签？ 如果我留下一个带有那个id的div，那就太乱了。

1. 第一个标签中的第三个标签内容apper
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>