Function fails when called by other function
<p>fairly new to jQuery so bear with me.</p>

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

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

<p>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. </p>

<p>How can I make this work?</p>

<p>Thanks for the help</p>

<pre><code>$(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);
}
</code></pre>
