Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get ID of clicked element which opened context menu using jQuery contextMenu Plugin

I use the jQuery contextMenu from Rodney Rehm in an SVG graphic. It works fine for basic usage.

But I need to get the ID (or any other property) of the SVG-Element which triggered the context menu to use it in the context menu's item list to get dynamic item names.

I work with the Simple Context Menu demo and now want to replace these static menu items with dynamic ones depending on the ID of the SVG element which was clicked on.

like image 382
cbl Avatar asked Aug 14 '12 10:08

cbl


People also ask

How do I find the ID of a clicked element?

To get the clicked element, use target property on the event object. Use the id property on the event. target object to get an ID of the clicked element.

How do I know which ID is clicked in jQuery?

Answer: Use the jQuery attr() Method You can simply use the jQuery attr() method to get or set the ID attribute value of an element. The following example will display the ID of the DIV element in an alert box on button click.

How does jQuery detect right click?

Using the mousedown() method: The mousedown() method in jQuery can be used to bind an event handler to the default 'mousedown' JavaScript event. This can be used to trigger an event. The event object's 'which' property can then used to check the respective mouse button.

What is context menu in jQuery?

The contextmenu event is sent to an element when the right button of the mouse is clicked on it, but before the context menu is displayed. In case the context menu key is pressed, the event is triggered on the html element or the currently focused element. Any HTML element can receive this event.


1 Answers

You Just have to check the on which Element the right click is done as::

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

            },
            items: {
                "Clone": { name: "Clone" },
                }
            }); 
like image 84
Rahul Avatar answered Sep 21 '22 12:09

Rahul