jquery - 动态添加的单选按钮不触发点击功能

Question

有一个单选按钮的办公室列表，用户可以单击该单选按钮，该按钮将在 div 中显示办公室信息。我可以让用户选择将办公室添加到单选按钮列表中。当用户填写表单时，单选按钮成功添加到列表中，但单击功能未触发，因此不会更新 div 中的办公室信息。当我单击其他单选按钮时，当我单击动态添加的单选按钮时，div 确实会更新。我尝试使用 .delegate() 来单击函数，因为单选按钮是在初始页面加载后添加的，但没有成功。

任何帮助将不胜感激!!!

如何添加单选按钮:

$(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;
});

名为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>

解决方案:为此，我需要将“click”更改为“change”事件。

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

<强> Fiddle Demo

Answer 1

您需要委托(delegate)该事件

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

因为您的单选按钮在绑定(bind)事件时不存在。

container 是 DOM 上最接近的祖先元素，其中存在 radio 元素。