title: Jquery UI-ContextMenu trigger menu on text selection
body: <p>I am using the <a href="https://github.com/mar10/jquery-ui-contextmenu" rel="nofollow">jquery-ui-contextmenu</a> jquery plugin. I have several dynamically generated divs each with a pre tag. What i want to is to initialize the plugin once and when a user highlights text and releases the left mouse button to trigger the context menu located at the position of the mouse. </p>
  
  <p>So far i have been able to trigger the menu but i cant seem to get the position of the menu to stick to the mouse once the button is released, also if the user right clicks they get 2 context menus.</p>
  
  <p>Here is my <a href="https://jsfiddle.net/2ugkhf83/7/" rel="nofollow">fiddle</a> as an example</p>
  
  <pre><code>$("div.editor").contextmenu({
    delegate: "pre",
    menu: [
      {title: "Copy", cmd: "copy", uiIcon: "ui-icon-copy"},
      {title: "----"},
      {title: "More", children: [
          {title: "Sub 1", cmd: "sub1"},
          {title: "Sub 2", cmd: "sub1"}
          ]}
      ],
     select: function(event, ui) {
      alert("select " + ui.cmd + " on " + ui.target.text());
    }
  });
  
  $("pre").bind("mouseup",function(e){
       $("div.editor").contextmenu('open',$("pre"));
  });
  
  &lt;div class="editor"&gt;&lt;pre&gt;&lt;/pre&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This is just some example code, but its very very similar to what i am using. We have a form under each div that has several fields we want to populate with the large text that is contained within the pre tag. And there could be as many as 20 div.editor tags each with its own form. </p>
  
  <p>The point is so a user can highlight a specific word or phrase and easily insert it into the appropriate form field. I can make it just use the highlight then right click method but that takes extra time for the user who has hundreds of these to do a day.</p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>Thanks again</p>