title: dynamic content loading with load() firing twice
body: <p>Here is my function:</p>
  
  <pre><code>$(".link").click(function(event){
      event.preventDefault();
      event.stopPropagation();
      pageLoad = $(this).data('page');
      $('div#loading').fadeIn();
      $('div#content').load('pages/'+pageLoad);
  });
  </code></pre>
  
  <p>I have a div with the id content on my page which displays the called pages, however it seems to load the pages twice. I know this because one of the pages displays something in a shuffled order, and I can see it load twice.
  Interestingly enough, it works fine when I add</p>
  
  <pre><code>throw new Error('something here');
  </code></pre>
  
  <p>to the end of the function like so:</p>
  
  <pre><code>// LINK CLICK
  $(".link").click(function(event){
      event.preventDefault();
      event.stopPropagation();
      pageLoad = $(this).data('page');
      $('div#loading').fadeIn();
      $('div#content').load('pages/'+pageLoad);
      throw new Error('bla bla');
  });
  </code></pre>
  
  <p>but anything else always causes it to fire twice. I tried rearranging things and so forth, but it still persists. My links that use this function are simple:</p>
  
  <pre><code>&lt;a href="#" class="link" data-page="whatever.php"&gt;link&lt;/a&gt;
  </code></pre>
  
  <p>Only one instance of jQuery 1.7.2 is being called. I am clueless as to what to do. I have also tried the live() and on() functions and experienced the exact same results.</p>
  
  <p>!!! EDIT !!!</p>
  
  <pre><code>$(".link").click(function(event){
      event.preventDefault();
      event.stopPropagation();
      pageLoad = $(this).data('page');
      console.log('clicked');
      $('div#loading').fadeIn(function() {
          console.log('faded');
          $('div#content').load('pages/'+pageLoad+'.php', function() {
              console.log('loaded');
          });
      });
  });
  </code></pre>
  
  <p>now... here is where this REALLY gets interesting. I did NOT change one of my links from</p>
  
  <pre><code>data-page="page.php"
  </code></pre>
  
  <p>to just</p>
  
  <pre><code>data-page="page"
  </code></pre>
  
  <p>(since the .php is now directly included in the function)</p>
  
  <p>When I click any of links that should work as intended, I get loaded, clicked, then faded in my error console. Only one of each. The page loads twice. However, when I click on the link that shouldn't work (because it contains the .php) IT STILL WORKS!! I get the three words and an error in my error console like so:</p>
  
  <pre><code>layout.js:25 clicked
  layout.js:27 faded
  jquery.min.js:4 GET pages/login1.php.php 404 (Not Found)
  layout.js:29 loaded
  </code></pre>
  
  <p>but the page still loads in the content div EVERY TIME I click it, and it only loads once like it should...</p>
  
  <p>So from what I have established here, there is some weird phenomenon occurring where jquery fetches page.php and page.php.php when I click the link</p>
  
  <pre><code>&lt;a href="#" class="link" page="login1.php"&gt;
  </code></pre>
  
  <p>the proof is displayed when I try and fetch a page that isn't even on my server using the following link:</p>
  
  <pre><code>&lt;a href="#" class="link" data-page="no"&gt;no&lt;/a&gt;
  </code></pre>
  
  <p>, where I am presented with 2 errors:</p>
  
  <pre><code>jquery.min.js:4 GET pages/no 404 (Not Found)
  jquery.min.js:4 GET pages/no.php 404 (Not Found)
  </code></pre>
  
  <p>How is this even possible? Why would jquery be doing this? Can anyone even attempt to explain what is going on here?</p>