title: custom jquery context menu optimzation
body: <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>