Erhalte die ID des geklickten Elements, welches das Kontextmenü mit jQuery contextMenu Plugin

Question

Ich benutze die jQuery contextMenu von Rodney Rehm in einer SVG-Grafik. Es funktioniert gut für den Grundgebrauch.

Aber ich muss die ID (oder eine andere Eigenschaft) des SVG-Elements, das das Kontextmenü ausgelöst hat, um es in der Elementliste des Kontextmenüs zu verwenden, um dynamische Elementnamen zu erhalten.

Ich arbeite mit der Demo Simple Context Menu und möchte nun diese statischen Menüeinträge durch dynamische ersetzen, abhängig von der ID des SVG-Elements, auf das geklickt wurde.

Answer 1

Dies kann Ihnen helfen: http://medialize.github.com/jQuery-contextMenu/demo/dynamic-create.html
Hier ist ein Beispielcode:

$(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

, wenn ich die statische Menüs verwenden, erhalte ich die ID wie folgt aus:

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

Vielleicht trigger.attr $ ("id") könnte für dich arbeiten.

Answer 3

Sie müssen nur überprüfen, die auf dem Element der rechten Maustaste als ::

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

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