I have an ajax call that returns html. This html includes two radio buttons. When the page is submitted, I need to verify the ajax results have had a radio selected. On initial page load, I have no problem, it is when I try to verify ajax results that it fails on the verification.

This is the code I am looking to implement :

 $("body").on("click", "address_type", function submitPage(event) { 
  var selectedVal = "";
  var selected = $("input[type='radio'][name='address_type']:checked");
  if (selected.length > 0) {
    selectedVal = selected.val();
  }else{
    alert('Check address type');
    event.preventDefault();
  }
});

The radio I am looking to verify (returned by ajax):

<label class="container">Radio No
<input name="address_type" value="commercial" type="radio" aria-required="true" id="Address_commercial">
<span class="checkmark"></span>
</label>

<label class="container" >Radio Yes
<input name="address_type" value="residential" type="radio" aria-required="true" id="Address_residential">
<span class="checkmark"></span>
</label>

The verification function submitPage is called by :

<div class="continue"  style="color:blue;">
<input type="submit" class="form-button" value="submit" onclick="submitPage(event)"/>
</div>

On the initial page load, is straight forward to verify, but when I return results from an ajax call, the verification is not performed correctly. Tried adding the $("body").on("click" but it does not seems to work.