javascript - Jquery-UI-Tab 的 ID 是否已更改？

Question

我需要一些帮助...我做了以下事情:

<div class="tabs">
  <ul>
    <li><a id="tb-1" position=1 href="tabs-1"> A </a></li>
    <li><a id="tb-2" position=2 href="tabs-2"> B </a></li>
    <li><a id="new-tab" position=3 href="new-tab"> + </a></li>
  </ul>

  <div id="tabs-1"> ... some html...</div>
  <div id="tabs-2"> ... some html...</div>
  <div id="new-tab"></div>
</div>

所以...写了JS代码:

$(".tabs").tabs();

$("#new-tab").click( function( event ) {

    // new tab position
    var position = $(this).attr("position"); 

    // change ID of "new-tab" tab to "tb-X"
    $('#new-tab').attr("id", "tb-"+position);  

    // title of current tab
    $("#tb-"+position).html("NEW");

    // add <div> to the new tab 
    $(".tabs").append( "<div id=\"tabs-"+position+"\"></div>");

    // add some html to the tab (not realy the above code)
    $("#tabs-"+position).html( new_data );

    // add new tab to tabs              
    var url = "#tabs-"+(position*1+1);
    $(".tabs").tabs("add", url, "+");

    // insert ID "new-tab" to the added tab
    $('.tabs li a').eq(position).attr("id", "new-tab");

    ... some more stuffs

然后，结果看起来很完美......但是......

• 点击[+]标签，添加一个新标签... ok

• 再次点击 [+](这是最近添加的标签)没有任何反应

• 点击 [NEW] 标签，它会再次创建一个新标签! ([NEW] 标签是旧的 [+] 标签)

检查代码，[+] 选项卡的 ID 已更改为新值......一切似乎都正常。

怎么了？

我希望我的英语很清楚!非常感谢!

Answer 1

这是一个更新。

既然我了解了 jQuery 选项卡控件，我认为这正是您想要的。顺便说一下，这个主意很酷。

JSFiddle:

http://jsfiddle.net/54WZH/5/

HTML

<div class="tabs">
  <ul>
    <li><a href="tabs-1"> A </a></li>
    <li><a href="tabs-2"> B </a></li>
  </ul>
</div>

JavaScript

var $tbs = $(".tabs");
$tbs.tabs().children("ul").append('<li><a id="new-tab" class="ui-state-default ui-corner-top"> + </a></li>');

$("#new-tab").click( function( event ) {

    //Need to remove our Plus button so it doesn't get counted when 
    //calling tabs("add",...)
    $(this).parent().remove();

    //Get the position of the new tab
    var pos = $tbs.find(" > ul > li:last").index() + 2; 

    //Insert the new tab & re-add the Plus button
    $tbs.tabs("add", "#ui-tabs-" + pos, "New").children("ul").append('<li><a id="new-tab" class="ui-state-default ui-corner-top"> + </a></li>');

    //Your dynamic tab content for this tab
    $("#ui-tabs-" + pos).html("Content-" + pos); 

    //Re-add the event for the Plus Button
    $("#new-tab").click(arguments.callee); 
});