jQuery上下文菜单 - 查找什么元素触发它 [英] jQuery context menu - finding what element triggered it off
问题描述
我想为我的一个页面写上下文菜单选项。
基本上一个div是右键单击,弹出一个选项菜单,可以用来执行任务。
I am trying to write a context menu option for a page of mine. Basically a div is right-clicked, an options menu pops up which can be used to perform tasks.
我的问题是试图找到原始元素触发一切(即右键单击的div)。
My problem is trying to find the original element which triggered everything (ie the div that was right-clicked).
我的jQuery代码更多或者lesS:
My jQuery code is more or lesS:
//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>
-
所以 - 我可以看到,点击发生。
但不是在单击菜单项时。
-- So - I can see what element created the event when the initial right-click happens. But not when the menu item is clicked.
我正在通过将元素写入隐藏的文本框,在右键单击时, ,然后在单击其中一个选项时读取它,然后在菜单关闭时将其删除。
看起来不像是理想的方法 - 我觉得我缺少一些基本的东西。
I was working on fumbling something together by writing the element out to a hidden textbox when it is right-clicked, then reading it when one of the options is clicked, then removing it when the menu closes. Doesn't seem like the ideal approach though - and I feel like i'm missing something basic.
希望你看到我想要做的。
我可以根据请求发布更完整的示例。
Hope you see what I am trying to do. I can post a more complete example on request.
推荐答案
您可以考虑使用jQuery 数据存储方法。
You could consider using the jQuery data storage methods.
在上下文菜单代码中,您可以put:
In your context menu code you can put:
$('.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;
});
然后当你想引用启动点击的元素时,你可以这样做: p>
Then when you want to reference the element that initiated the click, you can just do this:
$('#ctxDelete').click(function () {
var originalElement = $("#contextMenu").data('originalElement');
alert('delete was clicked by ' + originalElement.id );
});
在jQuery函数中放入 originalElement
code> $()来访问jQuery goodness。你放置数据的位置并不重要,因为任何DOM元素都可以有数据关联。你可以存储任何东西 - 在上面的示例代码中,我存储 HTMLElement
raw(不是jQueryified),但是如果你想的话,你也可以存储它。
And put originalElement
in the jQuery function $()
to access the jQuery goodness. It doesn't matter where you put the data, since any DOM element can have data associated to it. You can store anything - in the example code above, I store the HTMLElement
raw (not jQueryified) but you can store that too if you want.
在这里查看一个例子: http://www.jsfiddle.net/jonathon/sTJ6M/
See here for a little example: http://www.jsfiddle.net/jonathon/sTJ6M/
这篇关于jQuery上下文菜单 - 查找什么元素触发它的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!