Ciao a tutti.Sto cercando di usare quanto suggerito in http://jsfiddle.net/dmitry_far/cgqft4k3.

In pratica vorrei mettere in piedi il contextmenu sulle righe di una tabella.
Semplificando lo script e mettendolo tutto insieme.. non mi funziona proprio.
Dove sto sbagliando? Riuyscite ad aiutarmi?Vi incollo tutto l'html.Grazie mille!
codice HTML:


codice HTML:
<!DOCTYPE html>
<html>
<head>
<title>pippo</title>
  <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

</head>
<body>

<script type="text/javascript">
(function ($, window) {
    var menus = {};
    $.fn.contextMenu = function (settings) {
        var $menu = $(settings.menuSelector);
        $menu.data("menuSelector", settings.menuSelector);
        if ($menu.length === 0) return;
        
        menus[settings.menuSelector] = {$menu: $menu, settings: settings};
        
        //make sure menu closes on any click
        $(document).click(function (e) {
            hideAll();
        });
        $(document).on("contextmenu", function (e) {
            var $ul = $(e.target).closest("ul");
            if ($ul.length === 0 || !$ul.data("menuSelector")) {
                hideAll();
            }
        });
        
        // Open context menu
        (function(element, menuSelector){
            element.on("contextmenu", function (e) {
                // return native menu if pressing control
                if (e.ctrlKey) return;
                
                hideAll();
                var menu = getMenu(menuSelector);
                
                //open menu
                menu.$menu
                .data("invokedOn", $(e.target))
                .show()
                .css({
                    position: "absolute",
                    left: getMenuPosition(e.clientX, 'width', 'scrollLeft'),
                    top: getMenuPosition(e.clientY, 'height', 'scrollTop')
                })
                .off('click')
                .on('click', 'a', function (e) {
                    menu.$menu.hide();
                    
                    var $invokedOn = menu.$menu.data("invokedOn");
                    var $selectedMenu = $(e.target);
                    
                    callOnMenuHide(menu);
                    menu.settings.menuSelected.call(this, $invokedOn, $selectedMenu);
                });
                
                callOnMenuShow(menu);
                return false;
            });
        })($(this), settings.menuSelector);

        function getMenu(menuSelector) {
            var menu = null;
            $.each( menus, function( i_menuSelector, i_menu ){
                if (i_menuSelector == menuSelector) {
                    menu = i_menu
                    return false;
                }
            });
            return menu;
        }
        function hideAll() {
            $.each( menus, function( menuSelector, menu ){
                menu.$menu.hide();
                callOnMenuHide(menu);
            });
        }
        
        function callOnMenuShow(menu) {
            var $invokedOn = menu.$menu.data("invokedOn");
            if ($invokedOn && menu.settings.onMenuShow) {
                menu.settings.onMenuShow.call(this, $invokedOn);
            }
        }
        function callOnMenuHide(menu) {
            var $invokedOn = menu.$menu.data("invokedOn");
            menu.$menu.data("invokedOn", null);
            if ($invokedOn && menu.settings.onMenuHide) {
                menu.settings.onMenuHide.call(this, $invokedOn);
            }
        }
        
        function getMenuPosition(mouse, direction, scrollDir) {
            var win = $(window)[direction](),
                scroll = $(window)[scrollDir](),
                menu = $(settings.menuSelector)[direction](),
                position = mouse + scroll;
                        
            // opening menu would pass the side of the page
            if (mouse + menu > win && menu < mouse) {
                position -= menu;
            }
            
            return position;
        }    
                return this;
    };
})(jQuery, window);

$("#myTable tbody tr").contextMenu({
    menuSelector: "#contextMenu",
    menuSelected: function ($invokedOn, $selectedMenu) {
        var msg = "MENU 1\nYou selected the menu item '" + $selectedMenu.text() + 
            "' (" + $selectedMenu.attr("value") + ") " +
            " on the value '" + $invokedOn.text() + "'";
        alert(msg);
    },
    onMenuShow: function($invokedOn) {
        var tr = $invokedOn.closest("tr");
        $(tr).addClass("warning");
    },
    onMenuHide: function($invokedOn) {
        var tr = $invokedOn.closest("tr");
        $(tr).removeClass("warning");
    }
});


$("#myTable tbody td.username").contextMenu({
    menuSelector: "#contextMenuUsername",
    menuSelected: function ($invokedOn, $selectedMenu) {
        var msg = "MENU 2\nYou selected the menu item '" + $selectedMenu.text() + 
            "' (" + $selectedMenu.attr("value") + ") " +
            " on the value '" + $invokedOn.text() + "'";
        alert(msg);
    },
    onMenuShow: function($invokedOn) {
        $invokedOn.addClass("success");
    },
    onMenuHide: function($invokedOn) {
        $invokedOn.removeClass("success");
    }
});

</script>
<table id="myTable" class="table table-hover">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td class="username">@mdo</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td class="username">@fat</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td class="username">@twitter</td>
        </tr>
    </tbody>
</table>

<ul id="contextMenu" class="dropdown-menu" role="menu" style="display:none" >
    <li><a tabindex="-1" href="#" value="menu1:action-1">Action</a></li>
    <li><a tabindex="-1" href="#" value="menu1:action-2">Another action</a></li>
    <li><a tabindex="-1" href="#" value="menu1:action-3">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#" value="action-4">Separated link</a></li>
</ul>
<ul id="contextMenuUsername" class="dropdown-menu" role="menu" style="display:none" >
    <li><a tabindex="-1" href="#" value="menu2:action-1">User action</a></li>
    <li><a tabindex="-1" href="#" value="menu2:action-2">Another user action</a></li>
</ul>

      <script type="text/javascript">
        window.addEvent('load', function() {
          
        });
      </script>
      </body></html>