Функция щелчка не работает с классом 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?");
};