Loading a Google reCAPTCHA in AJAX loaded form

I am having issues rendering google reCAPTCHA on a page that's loaded using AJAX.

So to start with you go on a page. Then you click on for example the Contact link, which load the contact page via AJAX. The page loads fine and but the Google reCAPTCHA is not rendering.

I have already tried looked through most of the existing solutions, but they do not work for me. The code is working fine when forms are loaded without AJAX.

Any helps greatly appreciated!

Code below-

function renderRecaptcha () {
  if ($('#grecaptcha').length) {
    grecaptcha.render('grecaptcha', {
      sitekey: 'siteKey',
      callback: response => {
        console.log(response)
      },
    })
  }
}

<div class="g-recaptcha" id="grecaptcha"></div>
<script src='https://www.google.com/recaptcha/api.js?onload=renderRecaptcha&render=explicit' defer>

EDIT

All inline calls made within AJAX view works, but no other JavaScript call work.

<p onclick="renderRecaptcha()"id="MYBTN">CLICK</p>

The code above call the function and renders captcha.

The code below however does not, nothing gets printed.

$('#MYBTN').on('click', () => {
  console.log('here')
})