JavaScript return not behaving as expected : <p>I have a basic <code>jQuery</code> function:</p>

<pre><code>$(document).on('click', '#myElement', function(){
    alert( getItemDescription('2') );
});
</code></pre>

<p>My function gets called, and runs the following as expected:</p>

<pre><code>function getItemDescription(id){
        $.post("item_description.php", {id:id}, 
function () {
            // ...
        })
            .done(function (data) {
                    return data;
            })
            .fail(function () {
                return 'error';
            });
    }
</code></pre>

<p>When I look at the network tab in the console window, the <code>.post()</code> is successfully retrieving the correct info from <code>item_description.php</code>  --  However my original function -- The <code>alert</code> simply replies <code>undefined</code>  --  I have looked at the return manual in <code>JS</code> and read numerous posts on S.O.  --  <code>return</code> is supposed to be able to return a literal is it not?  What am I not seeing with this simple script?  How do I get the retrieved variable <code>data</code> from <code>getItemDescription</code> into the <code>alert</code> ?</p>
