title: How to select element loaded dynamically with ajax?
body: <p>Since there are parts of the page that are the same for all pages, I wish I could load them dynamically, so that I can edit them just once. I need, for example, to load a sidebar and a navbar.</p>
  
  <p>After being loaded, I need to store some elements in those external pages in variables so that I can call them later, for example, to animate them, manipulate them and so on.</p>
  
  <p>I thought that I only needed to select the class or the id but it seems not enough.</p>
  
  <pre><code>&lt;!-- navbar.html --&gt;
  &lt;div id="navbar-content"&gt;
      &lt;div id="element1"&gt;&lt;/div&gt;
      &lt;div id="element2"&gt;&lt;/div&gt;
      &lt;div id="element3"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- index.html --&gt;
  $( '#navbar' ).load( 'navbar.html #navbar-content &gt; *' );
  $( '#sidebar' ).load( 'sidebar.html #sidebar-content &gt; *' );
  
  var element1 = $( '#element1' ),
      element2 = $( '#element2' ),
      element3 = $( '#element3' );
  
  console.log( 'element1' );
  </code></pre>
  
  <p>The console returns:</p>
  
  <pre><code>Object { length: 0, prevObject: Object, context: HTMLDocument → products.html, selector: "#element1" }
  </code></pre>
  
  <p>which means that the console has returned nothing.</p>
  
  <p>How can I select elements loaded dynamically, if it is possible?</p>