title: How can I fire an event when I right click on a div inside a canvas with jQuery
body: <p><strong>UPDATE:</strong> I have updated the code snippet to include the whole page as found in Firebug.</p>
  
  <p>I have the following code: </p>
  
  <pre><code>&lt;html&gt;&lt;head&gt;
  
  &lt;title&gt;Welcome to CodeIgniter&lt;/title&gt;
  
  &lt;!--[if IE]&gt;
  &lt;script type="text/javascript" src="/assets/js/Jit/Extras/excanvas.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
  
  &lt;script src="/assets/js/jquery/jquery-1.4.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script src="/assets/js/Jit/jit.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/js/tree.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/js/jquery/jquery.rightClick.js" type="text/javascript"&gt;&lt;/script&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
      $(document).ready(function() {
          $(".node").rightClick(function() {
              alert ("RIGHT CLICK");
          });
  
          $.getJSON("/ajax/fetch/tree", function(data) {
              init(data);
          });
      });
  
      $(".node").live("click", function() {
          alert ($(this).attr("id"));
      });
  
  
  &lt;/script&gt;
  
  &lt;style type="text/css"&gt;
  html, body {
      width:100%;
      height:100%;
      background-color:#444;
      text-align:center;
      overflow:hidden;
      font-size:9px;
      font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
      margin:0;padding:0;
  }
  /* visualization style container */
  #infovis {
      background-color:#222;
      position:relative;
      width:900px;
      height:500px;
  }
  
  a, a:link, a:visited {
      color:#343439;
  }
  /* spacetree nodes CSS class */
  .node {
      background-color:transparent;
      font-weight:bold;
      overflow:hidden;
      text-decoration:none;
      position:absolute;
      text-align:center;
      padding:4px 1px 1px 1px;
  }
  
  .node:hover {
      color:#393434;
      }
  
  .hidden{
      display:none;
  }
  &lt;/style&gt;
  &lt;/head&gt;&lt;body&gt;
  
  &lt;div id="infovis"&gt;
      &lt;div id="mycanvas" style="width: 900px; height: 500px; position: relative;"&gt;
          &lt;canvas id="mycanvas-canvas" width="900" height="500" style="position: absolute; top: 0pt; left: 0pt; width: 900px; height: 500px;"&gt;&lt;/canvas&gt;
          &lt;div id="mycanvas-label" style="overflow: visible; position: absolute; top: 0pt; left: 0pt; width: 900px; height: 0pt;"&gt;
              &lt;div id="1" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 200px; top: 265px;"&gt;0.0&lt;/div&gt;
              &lt;div id="4" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 420px; top: 215px;"&gt;2.0&lt;/div&gt;
              &lt;div id="5" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 420px; top: 240px;"&gt;2.1&lt;/div&gt;
              &lt;div id="9" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 420px; top: 265px;"&gt;2.2&lt;/div&gt;
              &lt;div id="10" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 420px; top: 290px;"&gt;2.3&lt;/div&gt;
              &lt;div id="2" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 310px; top: 253px;"&gt;1.0&lt;/div&gt;
              &lt;div id="6" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 640px; top: 275px; display: none;"&gt;3.0&lt;/div&gt;
              &lt;div id="3" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 310px; top: 278px;"&gt;1.1&lt;/div&gt;
              &lt;div id="8" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 530px; top: 228px;"&gt;5.0&lt;/div&gt;
              &lt;div id="11" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 530px; top: 253px;"&gt;5.1&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="node"&gt;HELLO WORLD!&lt;/div&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>I want to be able to right click on one of the divs with the "node" class and then fire an event. Is there a way to do this with jQuery? I have looked at the context menu jQuery plugin found at <a href="http://www.javascripttoolbox.com/lib/contextmenu/" rel="noreferrer">http://www.javascripttoolbox.com/lib/contextmenu/</a>. However, if I use $('node').contextMenu(...) it doesn't work. If I use $('infovis').contextMenu(...) the context menu works.</p>
  
  <p>It looks like these divs are actually outside the canvas. I pulled this code straight from Firebug.</p>