获取上下文菜单和复选框以使用同一功能

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>