在動態創建的元素上乘上下文菜單

我想通過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頁面上提供了一個代碼，但它不起作用。我也嘗試模仿事件 - 成功。

我完全沮喪...

來源

2017-06-03 zzmaster

做法是完全錯誤的。只需初始化一次，然後使用'beforeOpen'事件修改菜單。閱讀API文檔，並看到這個例子http://plnkr.co/edit/Bbcoqy?p=preview。還請注意'replaceMenu（menu）'方法在文檔 – charlietfl

你這樣做是錯誤的。您不必使用ID來選擇元素，只是定義類，或者使用父元素作爲選擇初始化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>

來源

2017-06-03 15:40:29

好吧，只是查找文本鏈接..）） – zzmaster

在動態創建的元素上乘上下文菜單

回答

相關問題