Multiplizieren Kontextmenüs auf dynamisch erstellte Elemente

Question

Ich versuche, multiple Menüs durch jquery Kontextmenu Plugin lackofcarmatext zu verwalten: auf dynamisch erstellte Elemente.

Hier habe ich 2 Schaltflächen dynamisch erstellt und Menüs für sie werden mit der linken Maustaste erstellt.

<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 ist hier: https://codepen.io/zzmaster/pen/xrKvpm/

So zuerst, links Button # 1, klicken wir Menü für sie erstellen und dann direkt die gleiche Schaltfläche klicken wir das Menü sehen. Als nächstes klicken wir mit der linken Maustaste auf Button # 2, wir fügen das nächste Menü zu Button 2 hinzu und erwarten, es mit der rechten Maustaste zu sehen. Aber Rechtsklick auf Button 2 funktioniert nicht und wir können Menü für die zweite Schaltfläche (zweiter Menüpunkt Schaltfläche ID angezeigt) auf die erste Schaltfläche rechts klicken!

Nächste Mission - Ich möchte das Menü mit der linken Maustaste anzeigen, nicht richtig. Es gibt einen Code, der auf der Wiki-Seite des Plugins vorgeschlagen wird, aber es funktioniert nicht. Auch versuche ich Ereignisse nachzuahmen - ohne Erfolg.

ich total frustriert bin ...

Answer 1

Sie tun es der falsche Weg. Sie müssen nicht IDs verwenden, um die Elemente zu wählen, nur Klassen definieren, oder die übergeordneten Elemente als Selektor verwenden, um die contextmenu zu initialisieren, nachdem Sie dynamisch die Schaltflächen erstellen:

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

ODER

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

Sie haben auch einen Syntaxfehler unter <dic id="cont"> </div>, ändern Sie dic zu div.

nun ein voll funktionsfähiges Beispiel basierend auf dem Code:

$(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>