title: Problem accessing elements loaded from jQuery load()
body: <p>I wanted to use the jQuery load() method to be able to reuse the same navbar html for multiple pages. The problem is that I can't access individual elements within the navbar html after it is loaded (I want to be able to select a navbar item and add an 'active' class). Doesn't even work when I try to do this in the load() callback. The 'active' class does not toggle on the selected element when I run this code.</p>
  <p>If I try to select a navbar element using getElementById, it returns 'null.' This also doesn't work if I pass the callback as the second argument. It almost seems as if the callback is running before the html is loaded, but not sure why that would be the case.</p>
  <p>JS:</p>
  <pre><code>function activate(){
  
  
   $(function(){
      $(&quot;#rebates&quot;).toggleClass('active');
  })
  }
  
  $(function(){
  $(&quot;footer&quot;).load(&quot;footer.html&quot;);
  $(&quot;.navbar&quot;).load('navbar.html', null, activate()) })
  </code></pre>
  <p>It's loading the following html:</p>
  <pre><code>&lt;div class='logoText'&gt;&lt;h2&gt;Logo&lt;/h2&gt;&lt;/div&gt;    
  &lt;div class=&quot;navlinks&quot; id='navlinks'&gt;
     &lt;ul&gt;
         &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;&lt;span id='home'&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href=&quot;policies.html&quot;&gt;&lt;span id='policies'&gt;Policies&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href=&quot;rebates.html&quot;&gt;&lt;span id='rebates'&gt;Rebates&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href=&quot;contact.html&quot;&gt;&lt;span id='products'&gt;Products&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>