Динамический select

Всем привет.

Помогите разобраться.

Изначально на форме есть один select(у него id = area). При выборе каког-либо элемента нужно добавить ещё один select(у него id = region). С первым следующий код работает:

$(document).ready(function () {
    $('#area').on('change', function () {
        getRegions(host, $(this).val());
    });
    $('#region').on('change', function () {
        console.log("dqwd");
        getCities(host, $(this).val());
    });
});

Но когда выбираю во втором какой-то элемент, то событие change не отрабатывает. У меня есть предположение почему это может быть. `

$(document).ready(function () {

Скорее всего из-за этой функции. Когда документ загрузился, элемента с id region ещё нет и потом оно не отработает.

Что можно сделать с этим? Как заставить отработать событие change по второму select?