title: JQuery handler can't access data after Ajax function
body: <p>I made a Javascript object for updating and handling data using $.ajax({}) and external php scripts. The table element returned from the object when the object is called contains a number of hidden tr's (using the class "hidden", which is set to display:none). </p>
  
  <p>Here is the display function inside the object:</p>
  
  <pre><code>this.displayData = function(location_div) {
      var location_div = location_div;
      $.ajax({
              url:"display_data.php",
              type: "POST", 
              success:function(response){ 
                  $(location_div).html(response);
                  },
              error:function(response){alert("Error Displaying Problems." + response)},
          });
      };
  </code></pre>
  
  <p>which displays:</p>
  
  <pre><code>&lt;div id="location_div"&gt;
      &lt;table&gt;
          &lt;tbody&gt;
              &lt;tr class="hidden"&gt;&lt;/tr&gt;
              &lt;tr class="hidden"&gt;&lt;/tr&gt;
              &lt;tr class="hidden"&gt;&lt;/tr&gt;
              &lt;tr class="hidden"&gt;&lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>(note: "#location_div" is the element passed to "displayData(location_div)")</p>
  
  <p>The problem I'm having is when the JQuery tries to access the returned data. I have a function that looks for all of the tr's, pushes each to an array, and then fades each one in one-by-one.</p>
  
  <pre><code>var elements_array = new Array();
  $("#location_div table tbody").children().each(function() {
      elements_array.push(this);
  });
  //function for fading in each element in the array
  fadeAllIn(elements_array);
  </code></pre>
  
  <p>As I understand it, elements that are Ajax-loaded are not part of the DOM, and so one needs to use a JQuery function such as $(element).on(); or $(element).live(); However, nothing I have tried has worked. The table is being loaded, but JQuery can't seem to select each tr using .each() because the table is Ajax-loaded. </p>
  
  <p>Does anyone know the solution/workaround for this? Is there a better solution than using JQuery to fade in each tr in the table?</p>