为动态表创建Bootstrap上下文菜单

Question

我试图让this splendid JSFiddle code为动态表工作，但三小时后没有成功。阅读this post后，我尝试在文档对象上使用bind方法，但仍然没有成功。我很可能搞乱了Jquery语法。

有什么想法吗？！

$("#myTable td").contextMenu({
    menuSelector: "#contextMenu",
    menuSelected: function (invokedOn, selectedMenu) {
        var msg = "You selected the menu item '" + selectedMenu.text() +
            "' on the value '" + invokedOn.text() + "'";
        alert(msg);
    }

Answer 1

附加演示：尽管应用的CSS并不酷。

＆＃13;

＆＃13;

$(function(){
    var CLIPBOARD = "";

 $(document).contextmenu({
     delegate: ".hasmenu",
     autoFocus: true,
     preventContextMenuForPopup: true,
     preventSelect: true,
     taphold: true,
     menu: [
   {title: "Menu Header", cmd: "cat1", isHeader: true},
   {title: "Cut <kbd>Ctrl+X</kbd>", cmd: "cut", uiIcon: "glyphicon glyphicon-remove"},
   {title: "Copy <kbd>Ctrl+C</kbd>", cmd: "copy", uiIcon: "glyphicon glyphicon-file"},
   {title: "Paste <kbd>Ctrl+V</kbd>", cmd: "paste", uiIcon: "ui-icon-clipboard", disabled: true },
   {title: "----"},
   {title: "More", children: [
    {title: "Sub 1 (callback)", action: function(event, ui) { alert("action callback sub1");} },
    {title: "Edit <kbd>[F2]</kbd>", cmd: "sub2", tooltip: "Edit the title"},
 ]}
 ],
     // Handle menu selection to implement a fake-clipboard
     select: function(event, ui) {
   var $target = ui.target;
   switch(ui.cmd){
   case "copy":
    CLIPBOARD = $target.text();
    break
   case "paste":
    CLIPBOARD = "";
    break
 }
   alert("select " + ui.cmd + " on " + $target.text());
     // Optionally return false, to prevent closing the menu now
 },
     // Implement the beforeOpen callback to dynamically change the entries
     beforeOpen: function(event, ui) {
   var $menu = ui.menu,
    $target = ui.target,
    extraData = ui.extraData; // passed when menu was opened by call to open()

     // console.log("beforeOpen", event, ui, event.originalEvent.type);

   ui.menu.zIndex( $(event.target).zIndex() + 1);

   $(document)
     //    .contextmenu("replaceMenu", [{title: "aaa"}, {title: "bbb"}])
     //    .contextmenu("replaceMenu", "#options2")
     //    .contextmenu("setEntry", "cut", {title: "Cuty", uiIcon: "ui-icon-heart", disabled: true})
    .contextmenu("setEntry", "copy", "Copy '" + $target.text() + "'")
    .contextmenu("setEntry", "paste", "Paste" + (CLIPBOARD ? " '" + CLIPBOARD + "'" : ""))
    .contextmenu("enableEntry", "paste", (CLIPBOARD !== ""));

     // Optionally return false, to prevent opening the menu now
 }
 });


 });

＆＃13;

ul#ui-id-2 {
    background-color: #4f5d4f;
    color: white;
}
ul.ui-menu.ui-widget.ui-widget-content.ui-front {
    background-color: #4f5d4f;
    color: white;
}
li.ui-widget-header {
    padding: 14px;
    cursor: context-menu;
}

＆＃13;

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
 

    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>


  <meta name="viewport" content="width=device-width, initial-scale=1">


  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://wwwendt.de/tech/demo/jquery-contextmenu/jquery.ui-contextmenu.js"></script>
   
      
       <div class="container">
    <table class="table">
        <thead>
            <tr >
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr class="hasmenu">
                <td>John</td>
                <td>Doe</td>
                <td>john@example.com</td>
            </tr>
            <tr class="hasmenu">
                <td>Mary</td>
                <td>Moe</td>
                <td>mary@example.com</td>
            </tr>
            <tr class="hasmenu">
                <td>July</td>
                <td>Dooley</td>
                <td>july@example.com</td>
            </tr>
        </tbody>
    </table>
                </div>

＆＃13;

＆＃13;

＆＃13;