Question

Well I am creating Select with options that come from a database which are created from a for and in turn a button is created, which should insert a div with certain content, but at the moment of giving the event that when doing click that container is created, nothing happens.

No errors appear in the debugger , only nothing happens and for the moment I can not find the error, it would be very helpful if someone guided me since a short time ago I am using Jquery .

Then I'll drop the content that is created when a change occurs in the select:

    $('#select_perfil').on('change', function select_perfil() {
  $.ajax({
    type: 'POST',
    url: 'api/select_perfil',
    data: $('#select_perfil').serialize(),
    success: function(json) {
      if (json.success == 1) {
        var mes = json.message;
        var but = $('<input type="button" id="boton_asignar" title="revisar" class="btn-success btn-md" value="Asignar Usuarios">');
        var inp = $('<input type="hidden" id="usuario">')
        $('#resultado option').remove();
        $('#boton_asignar').remove();
        $('#usuario').remove();
        $('#ejecutivos').append('<option>--</option>')
        for (var i = 0; i < mes.length; i++) {
          $('#ejecutivos').append('<option class="opcion" value="' + mes[i][0] + '">' + mes[i][0] + '</option>');
        }
        $('#resultado').append(inp);
        $('#form_opciones').append(but);
        $('#ejecutivos').on('change', function() {
          $('#ejecutivos option:selected').each(function() {
            var str = "";
            str += $(this).text();
            $('#usuario').val(str);
          });
        })
      } else {
        $('#resultado option').remove();
        $('#boton_asignar').remove();
        $('#usuario').remove();
        $('#ejecutivos').append('<option>--</option>')
      }

    },
    error: function( /*xhr, status*/ ) {
      msg_box_alert(xhr.responsetext);
    }
  });
});
$('#select_perfil').one('click', function crear_select() {
  var sel = $('<select></select>');
  var lab = $('<label><strong>Asignar ejecutivos a Supervisor</strong></label><br>');
  $('#resultado').append(lab);
  $('#resultado').append(sel);
  sel.attr('id', 'ejecutivos');
  $('#ejecutivos').append('<option>--</option>')
});

This is created in a good way as soon as I produce a change in select .  

But when trying to create something after doing click in botón Assigning User nothing happens, then I will leave the código :

$('#boton_asignar').on('click',function(){
  var mostrarTodo = $('<section class="content"><!-- Default box --><div class="box" id="caja_secundaria"><!-- Custom Tabs (Pulled to the right) --><div class="nav-tabs-custom"><ul class="nav nav-tabs pull-rigth"><li class="active"><a href="#tab_2-2" data-toggle="tab"><label for="">Usuario</label></a></li><li class="pull-left header"></li></ul><div class="tab-content"><div class="tab-pane active" id="tab_1-1"><div class="row"><div class="col-md-6"><label for="">Usuarios no asignados</label></div><div class="col-md-6"><label for="">Usuarios asignados</label></div></div></div><!-- /.tab-pane --></div></div></div></section>');
  $('#controlTotal').append(mostrarTodo);

});

¨Thank you in advance I hope someone can understand the problem and help me solve it

PD: $('#controlTotal') is a div containing 1 child which is select with the options up to the button, the idea would be that the append was after this.