title: Error: grecaptcha is not defined for google recaptcha version 2
body: <p>I am implementing google recaptcha version 2.
  Here, the site-key which is used is coming from another API call from backend.</p>
  <pre><code>&lt;div class=&quot;form-group&quot;&gt;
     &lt;div id=&quot;captcha_container&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src=&quot;https://www.google.com/recaptcha/api.js?render=explicit&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>There is an ajax which bring different data, one of the data is site-key value for the captcha.</p>
  <pre><code>$.ajax({
      url : url,
      type : 'GET',
      headers : {
          &quot;cache-control&quot; : &quot;no-cache&quot;
      },
      success : function(data) {
         const siteKeyValue = data.siteKey;
         if(siteKeyValue) {
           grecaptcha.render('captcha_container', {
             'sitekey' : siteKeyValue
           });
         }
      }
  });
  </code></pre>
  <p>The code works and load the captcha but after 2-3 reload I get the error saying <strong>&quot;grecaptcha is not defined&quot;</strong>.</p>
  <p>I tried the solution of other stack question where loading the script and then executing like this but, it didn't work.</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
     $.getScript( &quot;https://www.google.com/recaptcha/api.js?render=explicit&quot;, 
     function() {
        grecaptcha.render('captcha_container', {
           'sitekey' : siteKeyValue
        });
     });
  &lt;/script&gt;
  </code></pre>
  <p>Adding setTimeout works but I don't think it is a good solution</p>
  <pre><code>setTimeout(function() {
    grecaptcha.render('captcha_container', {
       'sitekey' : siteKeyValue
    });
  }, 1000);
  </code></pre>
  <p>I don't want to use the onload method in script tag as my ajax function do other things as well.</p>
  <p>Thank you.</p>