功能未触发上下文菜单

Question

我创建了一个上下文菜单，该菜单应该将所选项目（表行中的文档）附加到单独的div中。我有一列复选框（与每个文档相对应）可以执行相同的操作并且可以正常工作，但是我无法使上下文菜单功能正常工作。

更新：这是一个link，用于查看代码。我使用Cloud9的IDE来利用本地JSON文件。

上下文菜单代码：

$(".checkbox-class").on("click", faveFunc);

$("#add-id").on("click", faveFunc);


function faveFunc(evt) {
    var anchor = $($(evt.target).prev().find("a")[0]).clone();
    switch($(".populate-faves").find("a:contains(" + $(anchor).text() + ")").length)
    {
      case 0:
        $(".populate-faves").append(anchor);
        break;
      default:
        $(".populate-faves > a:contains(" + $(anchor).text() + ")").remove();
        break;
    }
  }; // ------------ faveFunc


function newList() {
    let data = $(evt.target).prev().find("a").eq(0).html();
    let outputList = $(".populate-faves");

      $(".populate-faves").html("");

      $("#km-table-id tbody tr").each(function(el, x) {
        let fave = $(".checkbox-class", el);
        let cntxFave = $(".add-id", x);
        let itemText = $(data, el);

        if(cntxFave.is(".add-id")) {
          outputList.append("<li>" + itemText.html() + "</li>");
        } // ----- Not sure if this syntax is right, just copying what I have below

        if(fave.prop("checked")) {
          outputList.append("<li>" + itemText.html() + "</li>");
        }
      });
  }; // ------------ newList

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="custom-menu">
        <li data-action="open" id="open-id">Open Document</li>
        <li data-action="add" id="add-id">Set As Favorite</li>
        <li data-action="email">Email Document</li>
    </ul>

Answer 1

我有时为contextMenu制作了插件，这在需要时可能会对您有所帮助

易于使用。

$(".click").contextMenu(option)

option= {
dataSource:[{text: "", click: ()=>}]
action: "left" // "right" for rightClick and left for click
}

(function ($)
{
	$.fn.contextMenu = function (options)
	{
		var settings = $.extend({
			dataSource: [],
			click: function (item) { },
			onLoad: function (settings) { },
			action: "right"
		}, options);
		var container = $(this);
		var ini = false;
		if(settings.action === "right")
			container.attr("title", "Right click to edit");
		function buildContext(e)
		{
			$(".contextMenu").remove();
			if(settings.onLoad)
				settings.onLoad(settings);
			var context = $("<ul class='contextMenu'></ul>");
			$.each(settings.dataSource, function ()
			{
				var x = this;
				var div = $("<li class='contextItem'></li>");
				if(typeof x.text === "string")
					div.html($("<span>" + x.text + "</span>"));
				else
					div.html($("<span></span>").append(x.text));

				(div.find("span"), div).click(function ()
				{
					if(x.click)
						x.click(x);
					else
						if(settings.click)
							settings.click(x);
					context.remove();
				});

				function loadItem(item, parent)
				{
					var li = $("<li class='contextItem'></li>");
					if(typeof item.text === "string")
						li.html($("<span>" + item.text + "</span>"));
					else
						li.html($("<span></span>").append(item.text));

					li.click(function ()
					{
						if(settings.click)
							settings.click(item);
						context.remove();
					});

					if(item.children && item.children.length > 0)
					{
						parent.addClass("hasChildren");
						li.addClass("hasChildren");
						var y = $("<ul class='contextsubItem'></ul>");
						$.each(item.children, function ()
						{
							loadItem(this, y);
						});
						li.append(y);
					}
					parent.append(li);
				}

				if(x.children && x.children.length > 0)
					div.addClass("hasChildren");
				var ul = $("<ul class='contextsubItem'></ul>");
				$.each(x.children, function ()
				{
					loadItem(this, ul);
				});
				if(ul.children("li").length > 0)
					div.append(ul);
				context.append(div);
			});
			var iFrame = undefined;
			try
			{
				iFrame = container.closest("html").parent();
				if(iFrame.length <= 0)
					iFrame = undefined;
			} catch(ee)
			{
				// Ignore
			}
			context.css({
				left: e.pageX - 16,
				top: e.pageY + 25
			});
			if(!iFrame)
				$("body").append(context);
			else
			{
				iFrame.find("body").find(".contextMenu").remove();
				iFrame.find("body").append(context);
				iFrame.find("body").mousedown(function (e)
				{
					var target = $(e.target);
					if(!(target.parent().hasClass("contextItem") || target.hasClass("contextItem") || target.hasClass("contextMenu")))
					{
						context.remove();
						iFrame.find("body").find(".contextMenu").remove();
					}

				});
			}

			context.slideDown("slow");
			context.width(Math.max.apply(Math, $.map(context.find("div"), function (o)
			{
				return o.getBoundingClientRect().width;
			})));
			context.children(".contextItem").css("max-width", context.width() - (context.children(".contextItem").outerWidth(true) - context.width()));
			ini = true;
		}

		$("body").mousedown(function (e)
		{
			var target = $(e.target);
			if(!(target.parent().hasClass("contextItem") || target.hasClass("contextItem") || target.hasClass("contextMenu")))
				$(".contextMenu").remove();

		});

		if(settings.action === "right")
		{
			container.bind("contextmenu", function (e)
			{
				buildContext(e);
				return false;
			});

		} else
		{
			container.bind("click", function (e)
			{
				buildContext(e);
				return false;
			});
		}

		return container;
	};

}(jQuery));

$(".rightClick").contextMenu({
dataSource:[{ text:"Alert", click: (item)=> alert("you clicked on " + item.text) }]
})

$(".click").contextMenu({
dataSource:[{ text:"Alert", click: (item)=> alert("you clicked on " + item.text) }],
action:"left"
})

body{ background: #CCC}
ul.contextMenu, .contextMenu .contextsubItem {
    position: fixed !important;
    display: inline-block;
    min-width: 13em;
    max-width: 26em;
    padding: .25em 0;
    margin: .3em;
    font-family: inherit;
    font-size: inherit;
    list-style-type: none;
    background: #fff;
    border: 1px solid #bebebe;
    border-radius: .2em;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
    z-index: 999;
    list-style: none;
}

.contextMenu .contextsubItem {
    left: 100%;
    position: absolute !IMPORTANT;
    display: none;
    margin-top: -24px;
    margin-left: 2px;
}

.contextMenu .hasChildren::after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #0e0e0e;
    margin-top: -17px;
    right: 5px;
    position: absolute;
}

.contextMenu .contextItem {
    width: 100%;
    display: flex;
    color: #4e4d4d;
    font-size: 12px;
    cursor: pointer;
    max-width: 99%;
}

    .contextMenu .contextItem > span {
        width: 96%;
        display: block;
        clear: both;
        color: #545454;
        border-bottom: 0;
        font-size: 12px;
        padding: 6px 20px;
    }

    .contextMenu .contextItem .fa:before {
        padding-right: 5px;
    }


    .contextMenu .contextItem:hover > span:first-child {
        display: inline-block;
        background: #337ab7;
        color: white;
        width: 100%;
    }

    .contextMenu .contextItem:hover > .contextsubItem {
        display: inline-block !important;
    }


/*.contextMenu {
    position: relative;
    background: #ffffff;
    border: 4px solid #c2e1f5;
}*/


.contextMenu:after, .contextMenu:before {
    bottom: 100%;
    left: 14%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.contextMenu:after {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #ffffff;
    border-width: 8px;
    margin-left: -11px;
}

.contextMenu:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #ffffff;
    border-width: 8px;
    margin-left: -11px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="rightClick">right Click</p>

<p class="click">Click</p>