Почему не подключается селектор

Попробуйте так:

$(document).ready(function(){
 $.ajax({
          type:"GET",
          url: "regofficeajax.php",
          data: { area: $(this).val()},
          success: function(data) {
          var list = eval("("+data+")");
          //console.log(data);
          $("#search_advice_wrapper").html("").show();
                for(var i in list){
                      if(list[i] != ''){
                      // добавляем слою позиции
                      $('#search_advice_wrapper').append('<div class="advice_variant">'+list[i]+'</div>');
                      }
                }
                $('.advice_variant').click(function(){
                    // ставим текст в input поиска
                    $('#search_box').val($(this).text());
                    //Делаем активным второе поле
                    $('#search_city').removeAttr("disabled");
                    // прячем слой подсказки
                    $('#search_advice_wrapper').fadeOut(350).html('');
});
         },
          error: function (xhr, ajaxOptions, thrownError) {
          alert(xhr.status);
          alert(thrownError);
          }
  });
 });

Суть в том, что $.ajax - асинхронная функция и выполняется в собственном потоке, в разнобой с основным кодом. Весь код, который должен срабатывать после выполнения ajax запроса должен находиться в функции, которая указана в свойстве success параметров аякса.

Вы добавляете новый элемент в дерево DOM, и документ не совсем в курсе что вы хотите С ним сделать

$('#search_advice_wrapper').append('<div class="advice_variant">'+list[i]+'</div>');

Но у вас же есть body поэтому для новых элементов используйте его

Просто ограничьте его определенным селектором

$('body').on('click', '.advice_variant', function(){
  alert(1);
}