我正在尝试为我的页面编写上下文菜单选项。 基本上右键单击一个 div,弹出一个选项菜单,可用于执行任务。
我的问题是试图找到触发所有内容的原始元素(即右键单击的 div)。
我的 jQuery 代码或多或少是这样的:
//this is what displays the context menu
$('.outfeedPosition').bind("contextmenu", function (e) {
$('#contextMenu').css({
top: e.pageY + 'px',
left: e.pageX + 'px'
}).show();
//'this' is the element which was clicked by the user.
alert($(this).attr('id'));
return false;
});
//this is the contextMenu's button handler.
$('#ctxDelete').click(function () {
alert('delete was clicked, but i dont know by which element - so I dont know which one to delete');
});
<div id="contextMenu">
<ul>
<li><a id="ctxInsert" href="#">Insert</a></li>
<li><a id="ctxEdit" href="#">Edit</a></li>
<li><a id="ctxDelete" href="#">Delete</a></li>
</ul>
</div>
-- 所以 - 我可以看到当初始右键单击发生时是什么元素创建了事件。 但不是在单击菜单项时。
我正在努力通过右键单击元素时将元素写到隐藏的文本框,然后在单击其中一个选项时读取它,然后在菜单关闭时将其删除来摸索一些东西。 虽然这似乎不是理想的方法 - 我觉得我缺少一些基本的东西。
希望您看到我正在尝试做的事情。 我可以根据要求发布更完整的示例。
最佳答案
您可以考虑使用 jQuery data storage方法。
在您的上下文菜单代码中,您可以放置:
$('.outfeedPosition').bind("contextmenu", function (e) {
$('#contextMenu').css({
top: e.pageY + 'px',
left: e.pageX + 'px'
}).show();
//Store the item that was clicked
$("#contextMenu").data('originalElement', this);
return false;
});
然后当你想引用启动点击的元素时,你可以这样做:
$('#ctxDelete').click(function () {
var originalElement = $("#contextMenu").data('originalElement');
alert('delete was clicked by ' + originalElement.id );
});
并将 originalElement
放入 jQuery 函数 $()
中以访问 jQuery 优点。将数据放在哪里并不重要,因为任何 DOM 元素都可以关联数据。您可以存储任何内容 - 在上面的示例代码中,我存储了原始的 HTMLElement
(不是 jQueryified),但如果您愿意,您也可以存储它。
请参阅此处的小示例:http://www.jsfiddle.net/jonathon/sTJ6M/
关于jQuery 上下文菜单 - 查找触发它的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4430015/