Function fails when called by other function

Mark Hollas

fairly new to jQuery so bear with me.

I am having trouble getting the results of one function over to another an executing it.

Then the point is to pass the text as a var to the function populateMessage() and it writes the text to a text box.

I can get the text and it does get passed to the populateMessage function but the function never fully executes and the text box is not populated. If I wrap the populateMessage function in document.ready and have it write something like .text(‘test’); it will work.

How can I make this work?

Thanks for the help

$(document).ready(function () {
    getClickedInvite();
});

//gets clicked item template and sends it to message box

function getClickedInvite() {
    $('.card').click(function () {
        var selectedMessage = $(this).text();
        alert(selectedMessage);
        populateMessage(selectedMessage);
    });
}

function populateMessage(selectedMessage) { 
    alert(selectedMessage + ' has been sent to the message box ')
    var inviteMessageBoxId = $('#inviteMessageBox').find('textarea').attr('id');
    alert(inviteMessageBoxId);
    $('#' + inviteMessageBoxId).text(selectedMessage);
}