Handling programmatically added div in jquery ui tabs

Question

i am having problem with handling dynamically added div using jquery ui tabs. My goal is to have just one div element where content of that element is filled depending on what tab user selected. Now i know that when handling tabs, this library needs to be able to access div with id that a href in list points to. So, to add div i used select method,like this:

$("#tabs").tabs({
    select: function (event, ui) {
        var choice = ui.tab.href;
        choice = choice.split("/");
        showContent(choice[choice.length - 1]); //choice -> geting a href value of selected   tab (for example: #tab-1)  
    }
});

And in the showContent(choice) something like this:

function showContent(choice) {
    div_id = choice.replace("#", "");
    //set content div like
    $("#content").html("<div id='" + div_id + "'>" + some_content + "</div>");
}

After this i get right content in div named content (id of div inside is also fine -> in my example DOM contain):

<div id="content"><div id="tab-1">content</div></div>

But it seems like javascript code dont see newly created div,and tabs dont works with error: "jQuery UI Tabs: Mismatching fragment identifier".

Haw can i make javascript see this new div element?

Answer 1

i think you forgot to add this:

<li><a href="#tabs-1"> Tab 1</a></li>

And after refresh you tab container

$( ".#tabs" ).tabs( "refresh" );