title: Link positioning inside of div;
body: <p>Okay below I have posted the script I'm using and the <code>#targetDiv</code>, Basically my problem is when I move the link that is currently contained within the <code>#targetDiv</code> outside of the div, The link no longer loads the page inside of the div, Is there a way I can move the link outside of the <code>#targetDiv</code> and still have it load the page contents inside of the div. </p>
  
  <p><strong>Script</strong></p>
  
  <pre><code>$(function(){
      $('#targetDiv').on('click', 'a', function(e){
           e.preventDefault();// prevent browser from opening url
           $('#targetDiv').load(this.href);   
      });
  });
  </code></pre>
  
  <p><strong>Div</strong></p>
  
  <pre><code>&lt;div id="targetDiv" class="collapse"&gt;
  &lt;a href="/page.php"&gt;Load&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem I have is that I want the <code>load</code> link to be outside of the target div however when I move it outside of the div it loads the main page not the content within the <code>targetDiv</code>.</p>
  
  <p><strong>What I'm trying to achieve;</strong></p>
  
  <pre><code>&lt;a href="/page.php"&gt;Load&lt;/a&gt;
  &lt;div id="targetDiv" class="collapse"&gt;
  &lt;/div&gt;
  </code></pre>