title: JQuery UI Tabs from Dynamically Created DIVS
body: <p>I am creating an information dashboard to show the results of various actions for a web app.</p>
  
  <p>I would like to show data in tables, organized by tabs, ie each tab is different category with corresponding table.  The trouble is these tabs and tables need to be created on the fly based on an ajax response.</p>
  
  <p>Right now I have this skeleton for the tabs in my html:</p>
  
  <pre><code>&lt;div id="tabs"&gt;
    &lt;ul&gt;&lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>From my ajax request I get all of the categories and all of the data as JSON, and in javascript:</p>
  
  <pre><code>function(data){
      //making the tab links and content divs
      $.each(data.cat, function(){
        $('#tabs ul').append('&lt;li&gt;&lt;a href="#'+this.id+'"&gt;'+this.name+'&lt;/a&gt;&lt;/li&gt;');
        $('#tabs').append('&lt;div id="'+this.id+'"&gt;&lt;/div&gt;');
      }
      //making the tab content
      //cycle through all results, adding each to the table in div of its category
      $.each(data.results function(){
         var selector = '#' + this.catid + ' table tbody';
         $(selector).append('&lt;tr&gt;&lt;td&gt;'+this.something+'&lt;/td&gt;&lt;td&gt;'+ 
              this.somethingelse + '&lt;/td&gt;&lt;/tr&gt;');
      }
      $( "#tabs" ).tabs();
  }
  </code></pre>
  
  <p>This is "working" right now.  It appropriately puts the data into the right divs that is creating, but the styling when I call tabs() is not taking place so I just have divs underneath each other.  I know the problem -- these divs are new to the DOM and jquery isn't seeing them, but I have no idea how to fix it!</p>