Dynamically added radio button does not trigger click function

Question

There is a office list of radio button that a user can click on that will display the office information in a div. I have an option for the user to add an office to a list of radio buttons. When the user fills out the form, the radio button successfully gets added to the list but the click function does not trigger therefore does not update the office information in the div. When I click the other radio buttons the div does get updated, just when I click the dynamically added radio button. I have tried using .delegate() to the click function since the radio button was added after the initial page load, but without success.

Any help would be greatly appreciated!!!

How the radio button is added:

$(document).on("click", "#addOffice", function() {
  var officeadd = $('#officeAddForm').serializeArray();
  //console.log(officeadd);
  $.ajax({
      url:      'officeadd.php',
      type:         "POST",
      data:         officeadd,
      dataType: "json", 
      success: function(data) {
              console.log(data);
              if(data.errorCode[0] === 'ok') {
                console.log('NO ERRORS');
                console.log(data.officeInfo[1]);
                $('#officecontrolgroup > div.ui-controlgroup-controls').append('<input type="radio" name="office" id="office' + data.officeInfo[0] + '" value="' + data.officeInfo[0] + '"/><label for="office' + data.officeInfo[0] + '">' + data.officeInfo[1] + '</label>').trigger('create');
                $('#officecontrolgroup').controlgroup("refresh");
                $("#deliveryInstructions").trigger("updatelayout");
                $('#officeAddForm').trigger('reset');
                var $office = '#office'+ data.officeInfo[0];
                console.log($office);
                $(function(){

                    $($office).prop('checked', true).checkboxradio("refresh");
                    $($office).trigger('click');
                })

      }
  });
  return false;
});

Click function for the radio buttons named office:

$('input[name=office]:radio').on('click', function() {
var $value = $(this).val();
console.log($value);
$.ajax({
    url:        'officeget.php',
    type:       "POST",
    data:       {q: $value},
    dataType:   "json", 
    success: function(data) {
            console.log(data.officeName);
            $('#docoffice').hide();
            $('#docoffice').html(data.officeName).fadeIn(1000);
            $('#docaddress').hide();
            $('#docaddress').html(data.officeAddress).fadeIn(1000);
            $('#docsuite').hide();
            $('#docsuite').html('Suite '+data.officeSuite).fadeIn(1000);
            $('#doccitystate').hide();
            $('#doccitystate').html(data.officeCity+', '+data.officeState+' '+data.officePostalCode).fadeIn(1000);
            $('#docphone').hide();
            $('#docphone').html(data.officeTelephone).fadeIn(1000);
    }
});
});

HTML

<form id="officeChoice" class="submition">

<fieldset id="officecontrolgroup" class="ui-corner-all ui-controlgroup ui-      controlgroup-vertical ui-mini" style="margin-top:0px; width:100%;" data- mini="true" data-role="controlgroup" aria-disabled="false" data-disabled="false" data-shadow="false" data-corners="true" data-exclude-invisible="true" data-  type="vertical" data-init-selector=":jqmData(role='controlgroup')">
<div class="ui-controlgroup-controls">
<div class="ui-radio">
<div class="ui-radio">
<div class="ui-radio">

</div>
</fieldset>
</form>

Solution: For this to work I need to change the 'click' to a 'change' event.

$('#officeChoice').on('change','input[name=office]:radio', function() {...

Fiddle Demo

Answer 1

you would need to delegate the event

$(container).on('click', 'input[name=office]:radio', function() {

Because your radio button was non existent at the time the event was bound.

container is the closest ancestor element on your DOM in which the radio elements are present.