javascript - 获取上下文菜单和复选框以使用相同的功能

Question

我有一个表中复选框的 onClick 事件---单击一个框会将复选框的文本附加到一个单独的 div （“收藏夹列表”）。

但是，我也有一个上下文菜单，它的选择选项之一“设为收藏夹”并没有做同样的事情。我有一个为faveFunc在复选框和上下文菜单上使用该功能而创建的名称，但是在我无法让后者工作的地方出现了问题。

根据我的代码，我相信两者的功能应该是相同的，但我没有任何运气。所以我想知道上下文菜单本身是否存在问题而不是收藏功能。有什么想法吗？

JSFiddle（没有正确显示 JSON 数据。看看我是否可以将表数据硬编码到其中）

上下文菜单 JS：

   $('#km-table-id > tbody > tr').on('click', function(e){
     console.log('clicked', this); // works on left click
    })

    ///// Show menu /////
    $("#km-table-id").on("contextmenu", function(evt) {
      evt.preventDefault();
    $(".custom-menu")
    .show()
    .css({ top: evt.pageY, left: evt.pageX });

    ///// Close menu /////
      $("#km-table-id").on("mousedown", function(evt) {

        if (!$(evt.target).parents(".custom-menu").length > 0) {
          $(".custom-menu").hide(50);
        }
      }) 

     console.log("click detected"); // works on right click

    });

我的收藏夹功能：

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(i, el) {
      let fave = $(".checkbox-class", el);
      let itemText = $(data, el);

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

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

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

上下文菜单 HTML：

 <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</a></li>
 </ul>

标签： javascriptjqueryfunctionevents