title: JQuery UI dialog with tabs from a template string
body: <p>I am trying to create a JQuery-UI dialog with a jquery-ui tabbed construction embedded within it.  This is my function:</p>
  
  <pre><code> &lt;script type="text/javascript" language="javascript" charset="utf-8"&gt;
  
   function createDialog(title, text) {
  var tstr="&lt;div id='tabs' &gt;"
  +"&lt;ul&gt;"
  +"&lt;li&gt;&lt;a href='#tabs-1'&gt;A&lt;/a&gt;&lt;/li&gt;"
  +"&lt;li&gt;&lt;a href='#tabs-2'&gt;B&lt;/a&gt;&lt;/li&gt;"
  +"&lt;/ul&gt;"
  +"&lt;div id='tabs-1'&gt;"
  +"A Stuff Goes Here"
  +"&lt;/div&gt;"
  +"&lt;div id='tabs-2'&gt;B Stuff Goes Here"
  +"&lt;/div&gt;"
  +"&lt;/div&gt;"
   return $("&lt;div class='dialog' title='" + title + "'&gt;&lt;p&gt;" + tstr + "&lt;/p&gt;&lt;/div&gt;")
   .dialog({
  resizable:true,
  height:480,
  width:650,
  modal:true,
  buttons: {
          "Dismiss": function() {
              $( this ).dialog( "close" );
          }
      }
  });
  tabs.tabs();
  
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The dialog appears when the function is called, but the tabs are formatted as links.  Can anyone give me an idea as to what is wrong?  Note that the function is being called from a JQuery datatables callback.</p>
  
  <p><img src="https://i.stack.imgur.com/f4N7U.png" alt="Example"></p>