ID JQuery-UI-Tab изменен, или нет?

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 

Затем результаты кажется идеальным .. но .. .

• Щелкнув на вкладке [+] новая вкладка добавляется ... оК

• Щелкнув Aga in in [+] (это недавно добавленная вкладка) ничего не происходит

• Нажав на вкладку [NEW], она снова создаст новую вкладку! (На вкладке [NEW] был [+] Старая вкладка)

Проверка кода, идентификатор вкладки [+] изменено на новое значение ... все вроде бы нормально.

Что не так?

Надеюсь, мой английский был ясен! Большое спасибо!

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); 
});