title: Trying to get jQuery UI Tabs to fire on dynamic content
body: <p>Consider the following:</p>
  
  <pre><code>    var ids = [];
      function loadFeeds(id, terms) {
          $("#loadingdiv").removeClass("ui-helper-hidden");
          $('#' + id).empty(); 
        try {
              $.getJSON('https://mysite.com/search.json?q=' + terms', function(data) {
                  $.each(data.results, function(i, data) { 
                  $('#' + id).append('&lt;tr&gt;&lt;td&gt; + data.user + '&lt;/td&gt;&lt;td&gt;' + data.created + '&lt;/td&gt;&lt;td&gt;' + data.text + '&lt;/td&gt;&lt;/tr&gt;');                 
                  });
              });
          }
          catch (e) {
              alert('Error creating feed - ' + e.Message);
          }
      }
      function loopids()
       {
         for(i=0;i&amp;lt;ids.length;i++)
         {
            loadFeeds(ids[i][0], ids[i][1]);       
         }
       }
      function createTabsList()
       {
         $("#tabs").append('&lt;ul id="tabsul"&gt;&lt;/ul&gt;');
         for(i=0;i&amp;lt;ids.length;i++)
         {
           $("#tabsul").append('&lt;li&gt;&lt;a href="#tabs-' + ids[i][0] +'"&gt;Test&lt;/a&gt;&lt;/li&gt;');
         }
       }
  ... PAGE CODE ...
  &lt;div class="content clearfix"&gt;
            &lt;div id="tabs" class="ui-tabs"&gt;
  ... REPEATER CODE ...
  &lt;div&gt;
                        &lt;xsl:attribute name="id"&gt;
                          tabs-&lt;value-of select="@id"/&gt;
                        &lt;/xsl:attribute&gt;
                          &lt;table class="display"&gt;
                            &lt;tr&gt;&lt;th&gt;Search Results&lt;/th&gt;&lt;/tr&gt;
                          &lt;/table&gt;
                          &lt;table class="display"&gt;
                            &lt;xsl:attribute name="id"&gt;
                              &lt;value-of select="@id"/&gt;
                            &lt;/xsl:attribute&gt;
                                &lt;thead&gt;
                                  &lt;tr&gt;
                                      &lt;th&gt;
                                          User
                                      &lt;/th&gt;
                                      &lt;th&gt;
                                          Date
                                      &lt;/th&gt;
                                      &lt;th&gt;
                                          Message
                                      &lt;/th&gt;
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                            &lt;tbody&gt;&lt;/tbody&gt;
                          &lt;/table&gt;
                          &lt;script type="text/javascript"&gt;
                              ids.push(['&lt;xsl:value-of select="@dataid"&gt;&lt;/value-of&gt;', '&lt;xsl:value-of select="@txtSearchParams" /&gt;']);
                          &lt;/script&gt;
                        &lt;/div&gt;
  ... END REPEATER CODE ...
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>I can get the tables to load correctly - check the ids, everything is there correctly, but no matter where or how I seem to call $("tabs").tabs() - it doesn't render the content correctly. When it does render the "tabs" the other tables never disappear and clicking on the tab results in an "Uncaught Exception" being thrown.</p>
  
  <p>How can I get dynamic tabs working in this scenario.</p>