title: How can I hide an element loaded via Ajax?
body: <p>I have a script which uses AJAX to retrieve information from a php file called names.php.</p>
  
  <p>Further down the script i use JQuery's $(document.ready(function(){}); to try to hide a div on DOM load.</p>
  
  <p>For some reason the $("div").hide() function does not execute after the AJAX call. </p>
  
  <p>Can anyone help me understand why? I know that after an AJAX call you must bind elements to their event handlers but im wondering how its possible to right after the page loads.</p>
  
  <p>My script</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;body onload="getNames()"&gt;
  </code></pre>
  
  <p><strong>JQuery script</strong></p>
  
  <pre><code>function getNames()
  {
      function AJAX()
      {
          $.ajax({
              type: "GET",
              url: "names.php",
              data: namesVariables,
              success: function (retrievedData) 
              {
                  console.log(retrievedData);
                  jQuery("div").html(retrievedData);
              }
          });    
      }
  }
  
  $(  document ).ready(function()
  {
          $("div").hide();
  });
  </code></pre>