在动态创建的元素上增加上下文菜单

Question

我正在尝试通过 jquery contextmenu 插件管理多个菜单 lackofcarma://github.com/mar10/jquery-ui-contextmenu 在动态创建的元素上。

我在这里动态创建了 2 个按钮，并在单击鼠标左键时为它们创建了菜单。

<dic id="cont">  </div>
<script>
$(document).ready(function(){
  $('#cont').html('<button id="1">button #1</button> <button id="2">button #2</button>');


  $('button').on('click', function(e){
        var $target = $(e.target);
    var id = '#'+$target.attr('id');
    $(document).contextmenu({
      delegate: id, // #1 or #2
      menu: [{title:'Menu for'}, {title:id}]
    });
    alert('Created menu for button '+id);
    // now trying to show menu on left mouse click
    // as suggested by https://github.com/mar10/jquery-ui-contextmenu/wiki
    $('button').on('click', function(event){
      if ( event.which === 1 ) {  // left-click
        // Pass click event to `open()`
        $(document).contextmenu("open", event);
      }

      // just trigger event
      $('button').triggerHandler('contextmenu') ;

      // emulate mouse events
      $('button').trigger('mousedown',{button:2}).trigger("mouseup");

      // none  works..
    });         
  });
});
</script>

CodePen 在这里：https://codepen.io/zzmaster/pen/xrKvpm/

所以首先，左键单击按钮 #1 我们为其创建菜单，然后右键单击同一个按钮我们可以看到该菜单。接下来，左键单击按钮 #2，我们将下一个菜单附加到按钮 2，并希望在单击鼠标右键时看到它。但是右键单击按钮 2 不起作用，我们可以在第一个按钮右键单击时看到为第二个按钮创建的菜单（第二个菜单项显示按钮 ID）！

下一个任务 - 我想通过左键单击而不是右键来显示菜单。插件的 wiki 页面上建议了一个代码，但它不起作用。我也尝试模拟事件 - 没有成功。

我很沮丧...

Answer 1

你做错了。您不必使用 ID 来 select 元素，只需定义类，或使用父元素作为 select 或动态创建后初始化 contextmenu按钮：

$('#cont').contextmenu({
    delegate: "button",
    ...

或

$(document).contextmenu({
    delegate: "#cont button",
    ...

您在 <dic id="cont"> </div> 处也有语法错误，请将 dic 更改为 div。

现在，一个基于您的代码的完整示例：

$(function() {
  $('#cont').html('<button id="1">button #1</button> <button id="2">button #2</button>');

  $(document).contextmenu({
    delegate: "#cont button",
    menu: [
      {title: "Item 1", cmd: "item1"},
      {title: "Item 2", cmd: "item2"},
      {title: "----"},
      {title: "Item 3", cmd: "item3"}
    ],
    select: function(event, ui) {
      alert("select " + ui.cmd + " on " + ui.target.text());
    }
  });
});

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>

<div id="cont"></div>

在动态创建的元素上增加上下文菜单

Multiply context menus on dynamically created elements

jquery

contextmenu