How to fix this jQuery Scope mistake?
<p>Something I'm not able to figure out in this code, I think it's a scoping issue.</p>

<p>I have the following javascript snippet</p>

<pre><code>&lt;javascript language="javascript&gt;
    $(function() {
        $("#dialog").dialog({
            autoOpen: false
        });

        function getMessage(direction, msgId) {
            return "This is an " + direction + " message with ID: " + msgId;
        }

        function showMessage(direction, msgId) {
            $("#dialog").text(getMessage(direction, msgId));
            $("#dialog").dialog('open');
        }
    });
&lt;/script&gt;
</code></pre>

<p>That I want to call it like the following</p>

<pre><code>&lt;div id="dialog" title="Message Info"&gt;&lt;/div&gt;
&lt;input type="button" id="btnCommand1" value="Command 1" onclick="javascript: showMessage('Outgoing', 1000487874')" /&gt;
&lt;input type="button" id="btnCommand2" value="Command 2" onclick="javascript: showMessage('Incoming', 2000237851')" /&gt;
</code></pre>

<p>I understand that I can bind the click event through jQuery also but
because I create those buttons dynamically I need to call it like mentioned above.
The problem I get an error that showMessage() is not defined. I found that, in general, methods defined within jQuery scope $(function(){}) are not accessible from outside this scope! how to solve this?</p>
