동적 테이블에 대한 부트 스트랩 컨텍스트 메뉴 만들기

Question

동적 테이블에 대해 this splendid JSFiddle code이 작동하려고하는데 3 시간이 지나면 성공하지 못했습니다. 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는 좋지 않지만.

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

 

 
});

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; 
 
}

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