how can i make a dynamic context menu

Question

https://swisnl.github.io/jQuery-contextMenu I am using the context menu here

$.contextMenu({
        selector: '.selectedItem',
        // trigger: 'none',
        callback: function (key, options) {

            var m = "clicked: " + key;
            // window.console && console.log(m) || alert(m);
        },
        items: {
          edit: {name: "Edit", icon: "edit"},
                cut: {name: "Cut", icon: "cut"},
         }
    });

When I right click on the selectedItem div, I want to fill the items:{} object, how can I do that? I don't want to fill it statically . When I click on the selectedItem class with the right click, I want to look at its properties and add a cut, edit delete feature.

Answer 1

To do what you require you can use the build property. You can use this to dynamically generate the options based on the element which triggered the context menu.

$.contextMenu({
  selector: '.selectedItem',
  build: ($trigger, e) => ({
    items: {
      example: {
        name: $trigger.data('name'),
        icon: $trigger.data('icon')
      }
      // add options here...
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.9.2/jquery.contextMenu.min.js" integrity="sha512-kvg/Lknti7OoAw0GqMBP8B+7cGHvp4M9O9V6nAYG91FZVDMW3Xkkq5qrdMhrXiawahqU7IZ5CNsY/wWy1PpGTQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.9.2/jquery.contextMenu.css" integrity="sha512-EF5k2tHv4ShZB7zESroCVlbLaZq2n8t1i8mr32tgX0cyoHc3GfxuP7IoT8w/pD+vyoq7ye//qkFEqQao7Ofrag==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="selectedItem" data-name="Foo" data-icon="edit">Foo</div>
<div class="selectedItem" data-name="Bar" data-icon="cut">Bar</div>

Obviously, this is a contrived example using data attributes. You would most likely need to implement a lookup method to determine which options should be displayed for each context menu.