2011-04-20 133 views
3

我無法讓jQuery UI標籤在動態添加標籤和內容時工作。jQuery UI標籤動態添加標籤和內容不工作

<div id="wrap"> 
    <ul></ul> 
</div> 

jQuery的

var count = 1; 
$('#addspan').click(function() { 
    $('#wrap').append('<span id="page' + count + '">testing</span>'); 
    $('#wrap').find('ul').append('<li><a href="#page' + count + '">' + count + '</a></li>'); 
    count++; 
    $('#wrap').tabs(); 
}); 

檢查http://jsfiddle.net/qKBUu/1/

你可以看到,新創建的內容沒有出現在它的尊重標籤。所有內容一次顯示,標籤不起作用。

回答

6

試試這個:

$(function(){ 
     var count = 1; 

     $('#addspan').click(function() { 
      $('#wrap').append('<span id="page' + count + '">testing</span>'); 
      $('#wrap').find('ul').append('<li><a href="#page' + count + '">' + count + '</a></li>'); 
      count++; 
      var selIndex = $("#wrap").tabs("option", "selected"); 
      $('#wrap').tabs("destroy").tabs({selected: selIndex}); 
     }); 
    }); 

替代:

嘗試$()選項卡( 「添加」,選擇...)

如:

$(function(){ 
      var count = 1; 
      $('#wrap').tabs(); 
      $('#addspan').click(function() { 
       $('#wrap').append('<span id="page' + count + '">testing</span>'); 
       //$('#wrap').find('ul').append('<li><a href="#page' + count + '">' + count + '</a></li>'); 
       $('#wrap').tabs("add","#page" + count, count); 
       count++; 
      }); 
     }); 

例@:http://jsfiddle.net/Chandu/qKBUu/3/

+0

製表符應該裏面的chors。像'

  • '。在你的例子中,它是在錨標籤''內創建跨度。 – Pinkie 2011-04-20 21:19:42

    +0

    @Pinkie:我認爲jQuery選項卡tabify的一個元素,然後只允許通過添加方法添加新的選項卡。我已經檢查了jquery.ui.tabs源文件,看起來好像有一個_create方法,並且僅在最初調用標籤時調用。我對jQuery的小部件擴展沒有太多的瞭解。唯一的其他選擇是銷燬標籤並重新創建。檢查我更新的帖子。 – Chandu 2011-04-20 21:29:40

    +0

    jqueryui 1.9改變了api,add方法已被廢棄:http://jqueryui.com/upgrade-guide/1.9/#deprecated-add-and-remove-methods-and-events-use-refresh-method – 2013-03-26 05:07:02