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）！

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

我很沮丧......

Answer 1

你这样做是错误的。在动态创建按钮后，您不必使用ID来选择元素，只需定义类，或使用父元素作为选择器来初始化class Data(object): def __init__(self, n): self.plot = Plot(n) def minus(self, x): self.plot.n -= x class Plot(object): def __init__(self, n): self.n = n def double(self): return self.n * 2：

contextmenu

OR

$('#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());
    }
  });
});

在动态创建的元素

1 个答案: