title: JQuery Context Menu integration with JQuery DataTable
body: <p>I can't make Context Menu working. What I want is when I clicked any row, it alert me the first td text in it. </p>
  
  <p>This is my code in initializing my dataTable:</p>
  
  <pre><code>var init_item_seized_tbl = function init_item_seized_tbl(){
      $('#item_seized_tbl').DataTable({
          "autoWidth": false,
          "aoColumnDefs": [
              { "bSortable": false, "aTargets": [ 4 ] },
              { "sWidth": "20%", "aTargets": [ 0 ] },
              { "sWidth": "40%", "aTargets": [ 1 ] },
              { "sWidth": "10%", "aTargets": [ 2 ] },
              { "sWidth": "20%", "aTargets": [ 3 ] },
              { "sWidth": "10%", "aTargets": [ 3 ] },
          ],
          "fnCreatedRow"  : function( nRow, aData, iDataIndex ){
              $(nRow).addClass('item-context');
          },
          "fnRowCallback" : function( nRow, aData, iDisplayIndex, iDisplayIndexFull){
              console.log('fnRowCallback');
              $('table#item_seized_tbl tr').on('mouseenter', function () {       
                  $(this).contextMenu({
                      selector: '.item-context',
                      callback: function(key, options) {
                          //var m = "clicked: " + key;
                          //window.console &amp;&amp; console.log(m) || alert(m);
                      },
                      items: {
                          "edit": {name: "Edit", icon: "edit"},
                          "cut": {name: "Cut", icon: "cut"},
                          "copy": {name: "Copy", icon: "copy"},
                          "paste": {name: "Paste", icon: "paste"},
                          "delete": {name: "Delete", icon: "delete"},         
                      }
                  },
                  function (action, el, pos) {
                      alert(
                          'Action: ' + action + '\n\n' +
                          'Element ID: ' + $(el).attr('id') + '\n\n' +
                          'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)\n\n' +
                          'X: ' + pos.docX + '  Y: ' + pos.docY + ' (relative to document)\n\n'               
                      );  
                  }
                  );
              });     
          }
      });
  }
  </code></pre>
  
  <p>The problem is the context menu is not appearing.</p>
  
  <p>I tried another approach by separating the initialization of context menu. But I have no idea how to handle the events and alert me the first td in a row.</p>
  
  <pre><code>$.contextMenu({
      selector: '.item-context',
      callback: function(key, options) {
          var m = "clicked: " + key;
          window.console &amp;&amp; console.log(m) || alert(m);
      },
      items: {
          "edit": {name: "Edit", icon: "edit"},
          "cut": {name: "Cut", icon: "cut"},
          "copy": {name: "Copy", icon: "copy"},
          "paste": {name: "Paste", icon: "paste"},
          "delete": {name: "Delete", icon: "delete"},         
      }
  });
  </code></pre>
  
  <p>Your responses would be greatly appreciated. Thanks!</p>