The command must be specified in the data-command attribute of the <li> element instead of the anchor's href.

Author: gvas

README.md

@@ -94,18 +94,19 @@ $(document).contextmenu({
 });
 ```
 
-We also have to provide some HTML markup that defines the context menu 
-structure (see [jQueryUI menu] for details):
+We also have to provide some HTML markup that defines the context menu structure, see
+[jQueryUI menu] for details. jQuery UI 1.11 removed the requirement to use anchors in menu
+items, so the `<a>` tags should be omitted:
 
 ```html
 <ul id="options" class="ui-helper-hidden">
-    <li><a href="#copy"><span class="ui-icon ui-icon-copy"></span>Copy</a>
-    <li class="ui-state-disabled"><a href="#paste">Paste</a>
+    <li data-command="copy"><a href="#"><span class="ui-icon ui-icon-copy"></span>Copy</a>
+    <li data-command="paste" class="ui-state-disabled"><a href="#">Paste</a>
     <li>----
     <li><a>More</a>
         <ul>
-            <li><a href="#sub1">Sub 1</a>
-            <li><a href="#sub2">Sub 2</a>
+            <li data-command="sub1"><a href="#">Sub 1</a>
+            <li data-command="sub2"><a href="#">Sub 2</a>
         </ul>
 </ul>
 ```

jquery.ui-contextmenu.js

@@ -11,12 +11,6 @@
 	"use strict";
 	var supportSelectstart = "onselectstart" in document.createElement("div");
 
-	/** Return command without leading '#' (default to ""). */
-	function normCommand(cmd){
-		return (cmd && cmd.match(/^#/)) ? cmd.substring(1) : (cmd || "");
-	}
-
-
 	$.widget("moogle.contextmenu", {
 		version: "1.4.0-1",
 		options: {
@@ -144,7 +138,7 @@
 							isParent = (ui.item.has(">a[aria-haspopup='true']").length > 0),
 							$a = ui.item.find(">a"),
 							actionHandler = $a.data("actionHandler");
-						ui.cmd = normCommand($a.attr("href"));
+						ui.cmd = ui.item.attr("data-command");
 						ui.target = $(this.currentTarget);
 						// ignore clicks, if they only open a sub-menu
 						if( !isParent || !this.options.ignoreParentSelect){
@@ -254,7 +248,7 @@
 		},
 		/** Return ui-menu entry (<A> or <LI> tag). */
 		_getMenuEntry: function(cmd, wantLi){
-			var $entry = this.$menu.find("li a[href=#" + normCommand(cmd) + "]");
+			var $entry = this.$menu.find("li[data-command=" + cmd + "] a");
 			return wantLi ? $entry.closest("li") : $entry;
 		},
 		/** Close context menu. */
@@ -331,10 +325,11 @@ $.extend($.moogle.contextmenu, {
 			// hyphen, em dash, en dash: separator as defined by UI Menu 1.10
 			$parentLi.text(entry.title);
 		}else{
+			$parentLi.attr("data-command", entry.cmd);
 			$a = $("<a/>", {
 //				text: "" + entry.title,
 				html: "" + entry.title, // allow to pass HTML markup
-				href: "#" + normCommand(entry.cmd)
+				href: "#"
 			}).appendTo($parentLi);
 			if( $.isFunction(entry.action) ){
 				$a.data("actionHandler", entry.action);

test/index.html

@@ -30,14 +30,14 @@ <h3>Sample Markup</h3>
 	<!-- This element will be copied as #sampleMenu for every test: -->
 
 	<ul id="sampleMenuTemplate" style="display: none;">
-		<li><a href="#cut"><span class="ui-icon ui-icon-scissors"></span>Cut</a>
-		<li><a href="#copy"><span class="ui-icon ui-icon-copy"></span>Copy</a>
-		<li class="ui-state-disabled ui-icon-clipboard"><a href="#paste">Paste</a>
+		<li data-command="cut"><a href="#"><span class="ui-icon ui-icon-scissors"></span>Cut</a>
+		<li data-command="copy"><a href="#"><span class="ui-icon ui-icon-copy"></span>Copy</a>
+		<li data-command="paste" class="ui-state-disabled ui-icon-clipboard"><a href="#">Paste</a>
 		<li>----
 		<li><a>More</a>
 			<ul>
-				<li><a href="#sub1">Sub Item 1</a>
-				<li><a href="#sub2">Sub Item 2</a>
+				<li data-command="sub1"><a href="#">Sub Item 1</a>
+				<li data-command="sub2"><a href="#">Sub Item 2</a>
 			</ul>
 	</ul>
 </body>

test/tests.js

@@ -275,7 +275,7 @@ function _clickTest(menu){
 //		},
 		select: function(event, ui){
 //			window.console.log("select");
-			var t = ui.item ? $(ui.item).find("a:first").attr("href") : ui.item;
+			var t = ui.item ? $(ui.item).attr("data-command") : ui.item;
 			log("select(" + t + ")");
 			equal( ui.cmd, "cut", "select: ui.cmd is set" );
 			equal( ui.target.text(), "AAA", "select: ui.target is set" );
@@ -301,7 +301,7 @@ function _clickTest(menu){
 
 	setTimeout(function(){
 		// TODO: why is focus() called twice?
-		equal(logOutput(), "createMenu,create,open(),beforeOpen(AAA),after open(),open,select(#cut),close",
+		equal(logOutput(), "createMenu,create,open(),beforeOpen(AAA),after open(),open,select(cut),close",
 				"Event sequence OK.");
 		start();
 	}, 1000);
@@ -349,7 +349,7 @@ asyncTest("Array menu", function(){
 			}, 10);
 		},
 		select: function(event, ui){
-			var t = ui.item ? $(ui.item).find("a:first").attr("href") : ui.item;
+			var t = ui.item ? $(ui.item).attr("data-command") : ui.item;
 			log("select(" + t + ")");
 			equal( ui.cmd, "cut", "select: ui.cmd is set" );
 			equal( ui.target.text(), "AAA", "select: ui.target is set" );
@@ -367,7 +367,7 @@ asyncTest("Array menu", function(){
    log("after open()");
 
    setTimeout(function(){
-	   equal(logOutput(), "open(),after open(),open,select(#cut),cut action,close",
+	   equal(logOutput(), "open(),after open(),open,select(cut),cut action,close",
 		   "Event sequence OK.");
 	   start();
    }, 500);