title: reCAPTCHA field on page that is loaded through AJAX doesn't load. Suggestions?
body: <p>Live Examples:</p>
  
  <ul>
  <li><a href="http://utsarotaract.org/inc/email.php" rel="nofollow">Without AJAX</a></li>
  <li><a href="http://utsarotaract.org/contact.php" rel="nofollow">With AJAX (click Email Us link)</a></li>
  </ul>
  
  <p>When I view the source page everything works fine, but when I load through an AJAX request, in the place where the reCAPTCHA <strong>should</strong> be, I see...</p>
  
  <pre><code>&lt;noscript&gt;
    &lt;iframe src="http://www.google.com/recaptcha/api/noscript?k=6LfwkccSAAAAALr_z6vDBqkySowo5KIiR0mVM1BX" height="300" width="500" frameborder="0"&gt;&lt;/iframe&gt;&lt;br/&gt;
    &lt;textarea name="recaptcha_challenge_field" rows="3" cols="40"&gt;&lt;/textarea&gt;
    &lt;input type="hidden" name="recaptcha_response_field" value="manual_challenge"/&gt;
  &lt;/noscript&gt;
  </code></pre>
  
  <p>Obviously, this does nothing unless my user has JS disabled. During this process no errors are thrown.</p>
  
  <p>Viewing the code on the non-AJAX-requested pace, I see...</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LfwkccSAAAAALr_z6vDBqkySowo5KIiR0mVM1BX"&gt;&lt;/script&gt;
  
  &lt;noscript&gt;
    &lt;iframe src="http://www.google.com/recaptcha/api/noscript?k=6LfwkccSAAAAALr_z6vDBqkySowo5KIiR0mVM1BX" height="300" width="500" frameborder="0"&gt;&lt;/iframe&gt;&lt;br/&gt;
    &lt;textarea name="recaptcha_challenge_field" rows="3" cols="40"&gt;&lt;/textarea&gt;
    &lt;input type="hidden" name="recaptcha_response_field" value="manual_challenge"/&gt;
  &lt;/noscript&gt;
  </code></pre>
  
  <p>Note the additional line at the top of the script that addresses users with JS enabled.</p>
  
  <p>So I guess the question is two-fold. WTF is happening and how can I fix it?</p>
  
  <p>I've found some vague mention of this issue, but no decent answers. I found some mention of the reCAPTCHA API using <code>document.write</code>, but I don't know if that's valid. If I've overlooked something obvious, please feel free to point it out.</p>
  
  <p>Per request, the AJAX call is...</p>
  
  <pre><code>$(document).ready(function() {
       $.get('/inc/email.php', 
             function(data){
                  console.log('Get success!');
                  $('#email-form').html(data);
                  console.log('Get added to #email-form!');
                  $('#email-form form').submit( function(){
                      $.ajax({
                        type: "POST",  
                        url: "/inc/email.php",  
                        data: $('#email-form form').serialize(),  
                        success: function() {
                              console.log('Submit success!');
                              $('#email-form').html(data);
                        }
                      });
                      return false;
                  });
          }
       );
   });
  </code></pre>
  
  <p>What I've tries so far:</p>
  
  <ul>
  <li>Rewriting the code to fetch the remote JS file,  replace the document.write() clause with an append to the element I set to a specific ID, then run the modified code inline on the page</li>
  <li><a href="https://developers.google.com/recaptcha/docs/display" rel="nofollow">Displaying reCAPTCHA Without Plugins</a> instead of the <a href="https://developers.google.com/recaptcha/docs/php" rel="nofollow">PHP reCAPTCHA library</a></li>
  </ul>