jQuery上下文菜单 – 查找触发它的元素

我正在尝试为我的页面编写上下文菜单选项.
基本上右键单击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/