title: jQuery appending a table made from the AJAX data issues
body: <p>EDIT 2 -
  Thank you to everyone who looked at this. You all gave me ideas. The actual layout and calling of table was correct through jQuery. The issue seemed to be when the pop up this table was in loaded, it had already loaded the table. It was not waiting for the pop-up to actually open. Thus when the pop up opened, it didnt again trigger the AJAX call with the jQuery <code>.append()</code>. The answer is below.</p>
  <p>EDIT 1 -
  it seems that the issue could be when I launch the popup this is in, its not loading the jquery again. It loads initially with the page though. I have now wrapped the initial jquery in an <code>.on()</code> function and tried, on load, click, and open but it now isnt triggering. Is there a better DOM even to use?</p>
  <p>I am filling in an HTML table with data from an AJAX request. I have checked <code>console.log</code> so I know the AJAX request is good. It posts to the console just fine. So I wish to take that data and build a table out of it to display.</p>
  <p>I am using the code below however I can not get that data to <code>.append()</code> and show in the table. I have tried <code>.append()</code>, <code>.appendTo()</code> and even <code>.after()</code>. Nothing. I have given the table an ID, the <code>tbody</code> an ID, both of them an ID etc yet nothing shows.</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;table width='100%' border='0' style='display:inline-table' id='cats'&gt;
      &lt;thead&gt;&lt;tr&gt; &lt;th&gt;Breed&lt;/th&gt;&lt;th&gt;Name&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt; 
      &lt;tbody &gt;&lt;/tbody&gt;    
  &lt;/table&gt;
  </code></pre>
  <p><strong>jQuery</strong></p>
  <pre><code>jQuery('document').ready(function(){
              jQuery.ajax({
                  data: {action: 'cats_list'},
                  type: 'post',
                  url: my_ajax.ajax_url,  
                  dataType: 'JSON',
                  success: function(data) {
  
  
      jQuery.each( data, function( i, val ) { 
      jQuery('#cats tbody').append('&lt;tr&gt;&lt;td&gt;'+val.Name+'&lt;/td&gt;&lt;td&gt;'+val.Breed+'&lt;/td&gt;&lt;/tr&gt;');
      console.log(val);
      });     
  }       
  });     
  }); 
  </code></pre>
  <p>I have used variations of the table and body combo including</p>
  <pre><code>jQuery('#cats &gt; tbody')
  jQuery('#cats &gt; tbody:last-child')
  </code></pre>
  <p>With none of this will it display.</p>
  <p><strong>Data code example</strong></p>
  <pre><code>++++++++++++++++
  ++Breed  ++ Name++++
  ++Siamese++wiskers++
  ++++++++++++++++
  </code></pre>
  <p><strong>console data</strong>
  Object { id: &quot;43&quot;, Breed: &quot;Siamese&quot;, Name: &quot;Wiskers&quot; }</p>