0
我有一个自定义上下文菜单脚本，用于多个DOM元素。当显示元素时，我需要附加上下文菜单，并在未聚焦时分离它。我需要它被包含在一个函数中，以便我可以传递一个对象用于上下文菜单项目的点击功能。我怎么写这个，这样我就不必在每次显示时重新创建DOM元素了？这是我到目前为止有：自定义jQuery上下文菜单优化
function showCardContext(card)
{
cardContext = $('<ul>').css({'position': 'absolute', width: '150px', 'z-index': 5}).append(
$('<li>').append($('<a href="#">').html('Flip Over')).click(function(){/* do something with card here */}),
$('<li>').append(
$('<a href="#">').html('Counters'),
$('<ul>').append(
$('<li>').append($('<a href="#">').html('Increment')).click(function(){/* do something with card here */}),
$('<li>').append($('<a href="#">').html('Decrement')).click(function(){/* do something with card here */}),
$('<li>').append($('<a href="#">').html('Clear')).click(function(){/* do something with card here */})
)
),
$('<li>').append($('<a href="#">').html('Make Note')).click(function(){/* do something with card here */}),
$('<li>').append(
$('<a href="#">').html('Send To'),
$('<ul>').append(
$('<li>').append($('<a href="#">').html('Hand')).click(function(){/* do something with card here */}),
$('<li>').append(
$('<a href="#">').html('Deck'),
$('<ul>').append(
$('<li>').append($('<a href="#">').html('Shuffle In')).click(function(){/* do something with card here */}),
$('<li>').append($('<a href="#">').html('On Top')).click(function(){/* do something with card here */}),
$('<li>').append($('<a href="#">').html('On Bottom')).click(function(){/* do something with card here */}),
)
).click(function(){/* do something with card here */}),
$('<li>').append($('<a href="#">').html('Discard')).click(function(){/* do something with card here */}),
$('<li>').append(
$('<a href="#">').html('Land of Redemption'),
$('<ul>').append(
$('<li>').append($('<a href="#">').html('Yours')).click(function(){/* do something with card here */}),
$('<li>').append($('<a href="#">').html('Opponents')).click(function(){/* do something with card here */})
)
).click(function(){/* do something with card here */})
)
),
$('<li>').append($('<a href="#">').html('Remove From Play')).click(function(){/* do something with card here */}),
$('<li>').append($('<a href="#">').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') && !$clicked.parent().hasClass('card')) || e.
{
cardContext.hide();
}
});
}