jQuery ui-tabs load after the page loads

Question

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.

Answer 1

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!