jQuery ui-tabs load after the page loads

I need to create some tabs after the DOM has loaded. I create the neccessary markup using jQuery's append, and then create the tabs, but they are not working. The style is applied as it should, the tabs are shown, but all of the tab content is displayed immediately, and the tabs do nothing, when clicked upon. Do the tabs have to be initialized in some specific way?

Here's the code:

$(".edit-element").livequery(function() {
      $(".edit-element").click(
              function() {

                  //alert("Clicked");
                var id=$(this).parent().attr('id');
                 $(this).parent().append("<div id=\""+id+"_tabs\"><ul>
<li><a href=\""+id+"_tab0\">Nunc tincidunt</a></li>
<li><a href=\""+id+"_tab1\">Nunc tincidunt</a></li><开发者_开发问答/ul>
<div id=\""+id+"_tab0\">Proin elit</div>
<div id=\""+id+"_tab1\">Proin elit arcu, rutrum commodo</div></div>");
$(this).remove();
$("#"+id+"_tabs").tabs();       
              }
           );

    });

The livequery() is there, because I'm loading those elements remotely, via Ajax.

I found the answer myself.

I had forgotten the # sign before the div name in the link i have. So, instead of

<li><a href=\""+id+"_tab0\">Nunc tincidunt</a></li>

it should have been

<li><a href=\"#"+id+"_tab0\">Nunc tincidunt</a></li>

As simple as that.

Thanks for everyone that provided help!

Your tabs might not work because you are asigining id to tabs which already exists on that page. The id on the page should always be unique (ie you cannot use same id more then once on same page)

The below two code lines of yours indicate that you are assigning the tabs same id as it's parent and hence it might not work as expected when clicked.

 var id=$(this).parent().attr('id');
 $(this).parent().append("<div id=\""+id+"_tabs\"><ul>