More than one selector for context menu

Question

How can I have two different context menus against different elements? I tried this but though I don't get errors, it doesn't work:

$(function(){
  $.contextMenu({
    selector: '.dragIndiv, .dragGroup', 
    autoHide: 'true',
    callback: function(key, options) {
      // do something
    },
    items: {
      "amend"   : {name: "Amend", icon: "amend"},
      "relate"  : {name: "Relate", icon: "relate"}
    },
    selector: '#elementPallet', 
    autoHide: 'true',
    callback: function(key, options) {
      // do something else
    },
    items: {
      "submit" : {name: "Submit", icon: "aligntop"},
      "viewSource": {name: "View source", icon: "alignleft"},
    }
  });
});

Answer 1

Looking at the docs , I think you can only specified one items option per context menu. So can't you just create two context menus then?

 $(function(){ // first context menu $.contextMenu({ selector: '.dragIndiv, .dragGroup', autoHide: 'true', callback: function(key, options) { // do something }, items: { "amend" : {name: "Amend", icon: "amend"}, "relate" : {name: "Relate", icon: "relate"} } }); // second context menu $.contextMenu({ selector: '#elementPallet', autoHide: 'true', callback: function(key, options) { // do something else }, items: { "submit" : {name: "Submit", icon: "aligntop"}, "viewSource": {name: "View source", icon: "alignleft"}, } }); }); 

 div{ margin:5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/1.6.5/jquery.contextMenu.min.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/1.6.5/jquery.contextMenu.min.js"></script> <div> <div class="dragIndiv">Individual</div> <div class="dragGroup">Group</div> <div id="elementPallet">Pallet</div> </div> 

Answer 2

Here is my more complex context menu that is working here (using isim's solution) but doesn't work in my live environment (the second menu is ignored):-

  $(function(){ // first context menu $.contextMenu({ selector: '.dragIndiv, .dragGroup', autoHide: 'true', callback: function(key, options) { // do something }, items: { "amend" : {name: "Amend", icon: "amend"}, "relate" : {name: "Relate", icon: "relate"}, "hide" : {name: "Hide", icon: "hide"}, "delete" : {name: "Delete", icon: "delete"}, "sep1" : "---------", "submenu1" : {name: "Align", items: { "aligntop" : {name: "Top", icon: "aligntop"}, "alignleft": {name: "Left", icon: "alignleft"}, "alignbtm" : {name: "Bottom", icon: "alignbtm"}, "alignrght": {name: "Right", icon: "alignrght"} } }, "sep2" : "---------", "submenu2" : {name: "Grid", items: { "gridon" : {name: "Grid on", icon: "gridon"}, "gridoff" : {name: "Grid off", icon: "gridoff"}, "gridshow" : {name: "Grid show", icon: "gridshow"}, "gridhide" : {name: "Grid hide", icon: "gridhide"} } } } }); // second context menu $.contextMenu({ selector: '#elementPallet', autoHide: 'true', callback: function(key, options) { // do something else }, items: { "submit" : {name: "Submit", icon: "submit"}, "viewSource" : {name: "View source", icon: "viewsource"}, "runQuery" : {name: "Run query", icon: "runquery"}, "manage" : {name: "Manage tables", icon: "mtables"} } }); }); 

  div{ margin:5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/1.6.5/jquery.contextMenu.min.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/1.6.5/jquery.contextMenu.min.js"></script> <div> <div class="dragIndiv">Individual</div> <div class="dragGroup">Group</div> <div id="elementPallet">Pallet</div> </div>