2011-04-20 135 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