第一次单击按钮时，JQuery 不会将动态生成的复选框附加到模态

如何解决第一次单击按钮时，JQuery 不会将动态生成的复选框附加到模态

当点击事件触发时，将向最终用户显示一个模式并预先填充复选框。 我遇到的问题是，在第一次单击按钮时，预填充的复选框不会在模态上呈现。 如果我退出模态并再次单击该按钮，模态就会正确显示复选框。

为什么会这样？

(".changeCheckBoxList").click(buttonClickHandler);

function buttonClickHandler() {
  var button = $(this);
  swal({
    html: true,title: ""
    text: $('#chkBox')
    
  },function(isConfirm)){
      if (isConfirm)
      {
        $.post({
          type: 'POST',url: '/SomeController/AddCheckBoxesData',datatype: 'json',data: {
            //
          }
        
        }).done (function(results) {
          
        });
      }
    };
    
    $.ajax({
      type: 'GET',datatype: 'html',url: '/SomeController/SomeActionResult'  //This is getting back the correcting data
    }).done(function (results) {
    
      //dynamically generating the checkBoxes below
      $.each(results,function(key,value) {
        var div = $('<div><input type="checkBox" value="someValue" + <label for= key></label></div>');
        div.find('label').text(results[key].Name);
        $('#chkBox').append(div);
        
      });
    
    }
}

<button class="btn btn-default changeCheckBoxList" type="button" data-id="">n</button>

<div class="modal-body">
    <form id="chkBox">
        <div>
            <label for="examplecheckBox"> Click a checkBox</label>
            <input type="text" id="">
        </div>
    </form>
</div>