title: Jquery AJAX if/else based on (this).attr()
body: <p>My goal is to load a recaptcha only when the user clicks on the contact page link.</p>
  
  <p>I have successfully built a site that uses navigation links to load external HTML content into the index page's main content div based on the following function:</p>
  
  <pre><code>$('div#index_content').load($(this).attr('href') + ' #content');
  </code></pre>
  
  <p>When user clicks a navigation link, content from one of 6 individual .html or .php files is loaded into the index.html container:</p>
  
  <pre><code>&lt;div id="menu"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="home.html" class="active"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="fine_art.html" class="inactive"&gt;Fine Art&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="sketches.html" class="inactive"&gt;Sketches&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="props.html" class="inactive"&gt;Props&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="contact.php" class="inactive"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This all functions 100%. </p>
  
  <p>The next step was to appended a function to the .load statement which loads a recaptcha into an empty div with id="captcha" for my contact form:</p>
  
  <pre><code>$('div#page_content').load(($(this).attr('href') + ' #contentB'), 
     function() {
       Recaptcha.create("my public key", "captcha"); 
     }
   );
  </code></pre>
  
  <p>The site is still functioning at this point, but the function calling the captcha runs every time one of the navigation links is clicked, and I would like to create an if() statement that only runs the recaptcha load function if the $(this).attr('href') is loading the contact.php content. In other words, I would like it to only load the captcha when the user clicks on "Contact" in the navigation bar.</p>
  
  <p>I tried these two versions of my function but the captcha doesn't load in either case:</p>
  
  <pre><code>$('div#page_content').load(($(this).attr('href') + ' #contentB'), 
     function() {
         if ($(this).attr('href') == 'contact.php') {
                 Recaptcha.create("my public key", "captcha"); 
         }
     }
   );
  </code></pre>
  
  <p>and...</p>
  
  <pre><code>$('div#page_content').load(($(this).attr('href') + ' #contentB'), 
     function() {
         var ifContact = $(this).attr('href');
         if (ifContact == 'contact.php') {
                 Recaptcha.create("my public key", "captcha"); 
         }
     }
   );
  </code></pre>
  
  <p>Can anyone tell me what's wrong with my if() statement? Does the $(this).attr('href') actually hold a value that can be equal to something?</p>