Функцията за кликване не работи върху клас div, създаден в движение

Не съм сигурен как да подходя към този проблем.

Имам няколко бутона, направени в HTML с някои атрибути на данни, добавени към тях. Тези бутони имат клас, наречен roleBtn, който ще извика моята функция jQuery roleBtnClicked и ще вземе променливите в атрибутите на данните на HTML.

$(".roleBtn").click(roleBtnClicked);

function roleBtnClicked(event){
    reg.roleName  = $(this).html();           /* Get role name: Actor */
    reg.blueBtn   = $(this).data('blue');     /* Get blue-btn-1 */
    reg.the_Num   = $(this).data('num');      /* Get the number */
    reg.modal_ID  = $(this).data('modal');    /* Get modal-1 */

Сега, използвайки тази информация, след щракване върху roleBtn ще се появи модален прозорец, след което имам doneButton, който ще затвори модалния прозорец и ще използва променливите от атрибутите на данните, за да генерира нов HTML в движение. Този нов HTML ще съдържа бутон с клас blueBtn.

Проблемът ми е, че функцията ми за кликване за blueBtn няма да работи върху син бутон, който е създаден в движение. Ще работи върху div, който вече има клас blueBtn преди това, но не работи, ако е създаден в движение.

Знаете ли заобиколно решение на това? Или пропускам нещо просто?

След щракване върху doneButton имам друга функция, която създава новия HTML, включително blueBtns в движение:

$('.selected_row .choices-col-left').append('<div class="blueBtn-holder" id="blueBtnHolder-'+theNum+'"><div class="blueBtn" id="'+blueBtn+'" row="'+rowName+'" modal="'+modal_ID+'" num="'+theNum+'">'+roleName+'</div></div>');

Моята функция за натискане на син бутон, която не работи

$(".blueBtn").click(blueBtnClicked);

function blueBtnClicked(event){
    alert("Where are you blueBtn on the fly?");
    console.log("Where are you blueBtn on the fly?");
};