Wie kann ich recaptcha innerhalb einer schicken msgBox wie SWAL2 (JS/JQ) benutzen?

Question

EDITED: Oops veröffentlicht widersprüchlichen alten Code - behoben, was ich habe.

Wenn ich die div direkt nach Körper poste, funktioniert gut.

Ich habe es in eine HTML-Var und zeigen es in einem SWAL2 (https://github.com/limonte/sweetalert2) Box, und es wird nicht angezeigt. Dies ist nicht unbedingt eine Frage zu SWAL2, sondern eher, wie Recaptcha zu verwenden, nachdem das DOM geladen wurde, und dann später Recaptcha hinzuzufügen (wie diese SWAL2-Box).

Hier ist mein Code:

INDEX

... 
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script> 
</head> 

JS

$(document).ready(function() { 
    var onloadCallback = function() { 
     grecaptcha.render('recaptcha', { 
      'sitekey': 'myKeyyyyyyyyyyyyyy123' 
    }); 
}); 



// SWAL2 'fancy msgBox' 
var html = var html = "<div id='recaptcha'></div>"; 
swal({ 
    title: 'Humanity Check', 
    html: html 
}); 

Answer 1

INDEX // entfernen onloadCallback

<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script> 

<div id="generate">generate</div> 

JS // stellen Sie sicher, bevor #recaptcha existieren Rendern

$(document).ready(function() { 
    $('#generate').on('click', function() { 

     var html = "<div id='recaptcha'></div>"; 
     swal({ 
      title: html, 
      html: true // set to true to render HTML 
        ^^^^ 
     }); 
     grecaptcha.render('recaptcha', { 
      'sitekey': '******' 
     }); 
    }); 
});