jquery.ui-contextmenu.js demo

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<title>jquery.ui-contextmenu.js - Demo</title>

	<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
	<link href="style.css" rel="stylesheet" />

	<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
	<script src="//cdn.jsdelivr.net/jquery.ui-contextmenu/1.16.0/jquery.ui-contextmenu.min.js"></script>
	<script src="script.js"></script>
</head>

<body class="example">
	<h1>jquery.ui-contextmenu.js</h1>

	<p>Right-click in an element to open the context menu:</p>
	<div>
		<span class="hasmenu" tabindex="0">AAA</span>
		<span class="hasmenu" tabindex="0">BBB</span>
		<span class="hasmenu" tabindex="0">CCC</span>
	</div>
</body>
</html>

var CLIPBOARD = "";
$(function(){
 	$(document).contextmenu({
		delegate: ".hasmenu",
		autoFocus: true,
		preventContextMenuForPopup: true,
		preventSelect: true,
		taphold: true,
		menu: [
			{title: "Cut <kbd>Ctrl+X</kbd>", cmd: "cut", uiIcon: "ui-icon-scissors"},
			{title: "Copy <kbd>Ctrl+C</kbd>", cmd: "copy", uiIcon: "ui-icon-copy"},
			{title: "Paste <kbd>Ctrl+V</kbd>", cmd: "paste", uiIcon: "ui-icon-clipboard", disabled: true },
			{title: "----"},
			{title: "More", children: [
				{title: "Sub 1 (callback)", action: function(event, ui) { alert("action callback sub1");} },
				{title: "Edit <kbd>[F2]</kbd>", cmd: "sub2", tooltip: "Edit the title"},
				]}
			],
		// Handle menu selection to implement a fake-clipboard
		select: function(event, ui) {
			var $target = ui.target;
			switch(ui.cmd){
			case "copy":
				CLIPBOARD = $target.text();
				break;
			case "paste":
				CLIPBOARD = "";
				break;
			}
			alert("select " + ui.cmd + " on " + $target.text());
			// Optionally return false, to prevent closing the menu now
		},
		// Implement the beforeOpen callback to dynamically change the entries
		beforeOpen: function(event, ui) {
			var $menu = ui.menu,
				$target = ui.target,
				extraData = ui.extraData; // passed when menu was opened by call to open()

			// console.log("beforeOpen", event, ui, event.originalEvent.type);

			$(document)
//				.contextmenu("replaceMenu", [{title: "aaa"}, {title: "bbb"}])
//				.contextmenu("replaceMenu", "#options2")
//				.contextmenu("setEntry", "cut", {title: "Cuty", uiIcon: "ui-icon-heart", disabled: true})
				.contextmenu("setEntry", "copy", "Copy '" + $target.text() + "'")
				.contextmenu("setEntry", "paste", "Paste" + (CLIPBOARD ? " '" + CLIPBOARD + "'" : ""))
				.contextmenu("enableEntry", "paste", (CLIPBOARD !== ""));

			// Optionally return false, to prevent opening the menu now
		}
	});

});

body {
	font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
	font-size: .8em;
}

/* Only for the demo */
.hasmenu, .hasmenu2 {
	border: 1px solid #008;
	margin: 3px;
	padding: 5px;
	width: 30px;
}

/* Optionally define a fixed width for menus */
.ui-menu {
	width: 220px;
}
/* Allow to use <kbd> elements inside the title to define shortcut hints. */
.ui-menu kbd {
	padding-left: 1em;
	float: right;
}

/* Define a custom icon */
.ui-icon.custom-icon-firefox {
	background-image: url(application_firefox.gif);
	background-position: 0 0;
}

# jquery.ui-contextmenu Sample
Use this Plunk to try options or reproduce errors.