title: Why is the context menu not working some of the time?
body: <p>I have created a context menu item but it does not work all of the time. For instance, when I click on pause, it pauses, and when I click play, it plays again, and that happens one more time. After that, it does not do anything when I click on it. Then, it goes back to where it started. Here is my code:</p>
  
  <pre><code>&lt;script&gt;
      var x = 1;
  &lt;/script&gt; 
  &lt;script&gt;
      // JAVASCRIPT (jQuery)
  
      // Trigger action when the contexmenu is about to be shown
      $(document).bind("contextmenu", function (event) {
  
          // Avoid the real one
          event.preventDefault();
  
          // Show contextmenu
          $(".custom-menu").finish().toggle(100).
  
          // In the right position (the mouse)
          css({
              top: event.pageY + "px",
              left: event.pageX + "px"
          });
      });
  
  
      // If the document is clicked somewhere
      $(document).bind("mousedown", function (e) {
  
          // If the clicked element is not the menu
          if (!$(e.target).parents(".custom-menu").length &gt; 0) {
  
              // Hide it
              $(".custom-menu").hide(100);
          }
      });
  
  
      // If the menu element is clicked
      $(".custom-menu li").click(function(){
  
          // This is the triggered action name
          switch($(this).attr("data-action")) {
  
              // A case for each action. Your actions here
              case "first": alert("first"); break;
              case "second": alert("second"); break;
              case "third": alert("third"); break;
          }
  
          // Hide it AFTER the action was triggered
         $(".custom-menu").hide(100);
        });
  &lt;/script&gt;
  &lt;script&gt;
      function changeContextMenuIn() {
  
  &lt;/script&gt;
  &lt;style&gt;
       /* CSS3 */
      /* The whole thing */
      .custom-menu {
      display: none;
      z-index: 1000;
      position: absolute;
      overflow: hidden;
      border: 1px solid #CCC;
      white-space: nowrap;
      font-family: sans-serif;
      background: #FFF;
      color: #333;
      border-radius: 5px;
      padding: 0;
      }
      /* Each of the items in the list */
      .custom-menu li {
      padding: 8px 12px;
      cursor: pointer;
      list-style-type: none;
      }
      .custom-menu li:hover {
      background-color: #DEF;
      }
  &lt;/style&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"&gt;&lt;/script&gt;
  &lt;video width="640" id="vidPlayerMain" autoplay="" controls="" onclick="if (x == 1) {document.getElementById('vidPlayerMain').pause(); document.getElementById('pauseContextMenu').innerHTML='Play'; x = 0;} else {document.getElementById('vidPlayerMain').play(); document.getElementById('pauseContextMenu').innerHTML='Pause'; x = 1;}" name="media"&gt;
      &lt;source src="https://video-lax1-1.xx.fbcdn.net/hvideo-xpa1/v/t42.1790-2/1063787_495053737243964_500266464_n.mp4?efg=eyJybHIiOjYzNSwicmxhIjo3MzZ9&amp;rl=635&amp;vabr=353&amp;oh=d763b8ecfa2a823b9971c497732e4b69&amp;oe=55C8F2C9" type="video/mp4"&gt;
  &lt;/video&gt;
  &lt;br /&gt;
  &lt;ul id='contextMenu' class='custom-menu'&gt;
      &lt;li data-action="first"&gt;&lt;a href="javascript:if (x == 1) {document.getElementById('vidPlayerMain').pause(); document.getElementById('pauseContextMenu').innerHTML='Play'; x = 0;} else if (x == 0) {document.getElementById('vidPlayerMain').play(); document.getElementById('pauseContextMenu').innerHTML='Pause'; x = 1;}; $('.custom-menu').hide(100);" style="text-decoration:none; color:#333;" id="pauseContextMenu"&gt;Pause&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>