jquery - 使用 jQuery contextMenu 插件获取打开上下文菜单的单击元素的 ID

Question

我在 SVG 图形中使用来自 Rodney Rehm的jQuery contextMenu 。它适用于基本用途。

但是我需要获取触发上下文菜单的 SVG 元素的 ID（或任何其他属性），以便在上下文菜单的项目列表中使用它来获取动态项目名称。

我使用Simple Context Menu演示，现在想根据单击的 SVG 元素的 ID 用动态菜单项替换这些静态菜单项。

Answer 1

This may help you: http://medialize.github.com/jQuery-contextMenu/demo/dynamic-create.html
Here's some sample code:

$(function(){
    $.contextMenu({
        selector: 'my-selector-here', 
        build: function($trigger, e) {
            // this callback is executed every time the menu is to be shown
            // its results are destroyed every time the menu is hidden
            // e is the original contextmenu event, containing e.pageX and e.pageY (amongst other data)
            // $trigger is the element that was rightclicked on - get its id here
            var id = $trigger.getTheIDSomehow()
            // build the menu items
            if (id == 1) {
              menuItems = {...}
            else if (id == 2)
              menuItems = {...}
            return {
                callback: function(key, options) {
                    // this is called when one of the contextmenu options is clicked
                },
                items: menuItems
            };
        }
    });
});

Answer 2

当我使用静态菜单时，我得到这样的 id：

...
callback: function (key, options) {
    id = options.$trigger.attr("id");
    ...
},
...

也许 $trigger.attr("id") 可以为你工作。

Answer 3

您只需检查右键单击是在哪个元素上完成的：

$.contextMenu({
            selector: 'tr',
            callback: function (key, options) {
                var m = "clicked: " + key;
                if (key == "Clone") 
               {
                    Your_Function($(this).attr('id'));
               }

            },
            items: {
                "Clone": { name: "Clone" },
                }
            });