我正在尝试为我的页面编写上下文菜单选项.
基本上右键单击div,弹出一个选项菜单,可用于执行任务.
基本上右键单击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",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 );
});
并将原始元素放在jQuery函数$()中以访问jQuery的优点.放置数据的位置并不重要,因为任何DOM元素都可以包含与之关联的数据.你可以存储任何东西 – 在上面的示例代码中,我存储了HTMLElement raw(不是jQueryified),但你也可以存储它.
请看这里的一个小例子：http://www.jsfiddle.net/jonathon/sTJ6M/
