jQuery UI Tabs dynamically adding tabs and content not working
I can't get jQuery UI tabs to work when dynamically adding tabs and content.
<div id="wrap">
<ul></ul&开发者_StackOverflow中文版gt;
</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();
});
Check http://jsfiddle.net/qKBUu/1/
You can see that newly created content is not showing in it's respected tabs. All content is showing at once and tabs are not working.
Try this:
$(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});
});
});
Alternative:
Try $().tabs("add", options...)
e.g:
$(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++;
});
});
Example @: http://jsfiddle.net/Chandu/qKBUu/3/
精彩评论