custom jquery context menu optimzation
<p>I have a custom context menu script that is used for multiple dom elements. I need to attach the context menu when the element is shown, and detach it when unfocused. I need it to be contained within a function so that I can pass an object to be used in the click functions of the context menu's items. How can I write this so that I don't have to re-create the DOM elements every time it's shown? Here's what I have so far:</p>

<pre><code>function showCardContext(card)
{
    cardContext = $('&lt;ul&gt;').css({'position': 'absolute', width: '150px', 'z-index': 5}).append(
        $('&lt;li&gt;').append($('&lt;a href="#"&gt;').html('Flip Over')).click(function(){/* do something with card here */}),
        $('&lt;li&gt;').append(
            $('&lt;a href="#"&gt;').html('Counters'),
            $('&lt;ul&gt;').append(
                $('&lt;li&gt;').append($('&lt;a href="#"&gt;').html('Increment')).click(function(){/* do something with card here */}),
                $('&lt;li&gt;').append($('&lt;a href="#"&gt;').html('Decrement')).click(function(){/* do something with card here */}),
                $('&lt;li&gt;').append($('&lt;a href="#"&gt;').html('Clear')).click(function(){/* do something with card here */})
            )
        ),
        $('&lt;li&gt;').append($('&lt;a href="#"&gt;').html('Make Note')).click(function(){/* do something with card here */}),
        $('&lt;li&gt;').append(
            $('&lt;a href="#"&gt;').html('Send To'),
            $('&lt;ul&gt;').append(
                $('&lt;li&gt;').append($('&lt;a href="#"&gt;').html('Hand')).click(function(){/* do something with card here */}),
                $('&lt;li&gt;').append(
                    $('&lt;a href="#"&gt;').html('Deck'),
                    $('&lt;ul&gt;').append(
                        $('&lt;li&gt;').append($('&lt;a href="#"&gt;').html('Shuffle In')).click(function(){/* do something with card here */}),
                        $('&lt;li&gt;').append($('&lt;a href="#"&gt;').html('On Top')).click(function(){/* do something with card here */}),
                        $('&lt;li&gt;').append($('&lt;a href="#"&gt;').html('On Bottom')).click(function(){/* do something with card here */}),
                    )
                ).click(function(){/* do something with card here */}),
                $('&lt;li&gt;').append($('&lt;a href="#"&gt;').html('Discard')).click(function(){/* do something with card here */}),
                $('&lt;li&gt;').append(
                    $('&lt;a href="#"&gt;').html('Land of Redemption'),
                    $('&lt;ul&gt;').append(
                        $('&lt;li&gt;').append($('&lt;a href="#"&gt;').html('Yours')).click(function(){/* do something with card here */}),
                        $('&lt;li&gt;').append($('&lt;a href="#"&gt;').html('Opponents')).click(function(){/* do something with card here */})
                    )
                ).click(function(){/* do something with card here */})
            )
        ),
        $('&lt;li&gt;').append($('&lt;a href="#"&gt;').html('Remove From Play')).click(function(){/* do something with card here */}),
        $('&lt;li&gt;').append($('&lt;a href="#"&gt;').html('Relenquish Control')).click(function(){/* do something with card here */})
    ).appendTo($('body')).menu().hide();

    $(card.view).bind('contextmenu', function(e){cardContext.css({'left':e.pageX,'top':e.pageY}).show();});

    $(document).bind('click', function(e) {
        var $clicked = $(e.target);

        // Hide Deck Menu
        if ((!$clicked.hasClass('card') &amp;&amp; !$clicked.parent().hasClass('card')) || e.
        {
            cardContext.hide();
        }

    });
}
</code></pre>
