title: JQuery .load() inside div
body: <p>This has been driving me nuts! I've searched and tried a bunch of suggestions that seem like they should work, so I must be doing something foolish.</p>
  
  <pre><code>$(document).ready(function(){
    $('.trigger').click(function(){
    var link = $(this).attr("href");
      $('#target').load(link);
      return false;
    });
  });
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;div id='content'&gt;
  This is some stuff that I want left alone.
  &lt;a href="testload1.html" class="trigger"&gt;Click here&lt;/a&gt;
  &lt;a href="testload2.html" class="trigger"&gt;Click here&lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="target"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm trying to load the html document "testload1" and "testload2" (which just contain a line of text) into the "target" div.</p>
  
  <p>Instead what happens is the "testload1" page just loads as a normal link would.</p>
  
  <p>edit: more info</p>
  
  <p>I tried the suggested changes below with no difference. This leads me to think there is something wrong with the rest of the file, so here it is:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
  &lt;title&gt;test&lt;/title&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt; 
  &lt;script&gt;
  $(document).ready(function(){
    $('.trigger').click(function(){
    var link = $(this).attr("href");
      $('#target').load(link);
      return false;
    });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id='content'&gt;
  This is some stuff that I want left alone.
  &lt;a href="testload1.html" class="trigger"&gt;Click here&lt;/a&gt;
  &lt;a href="testload2.html" class="trigger"&gt;Click here&lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="target"&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Is there any reason this shouldn't work?</p>