title: How to display context menu on ajax success
body: <p>I'm displaying an image on my mvc application. The user can click the image and it triggers an ajax call that uses a method on my controller. I would like to display my context menu on ajax success (when user left clicks the image) relative to the position of the image but it's not showing my context menu. Can someone tell me what I'm doing wrong?
  This is what I have </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function () {
      $(".audiobtn").click(function () {
  
          $.ajax({
              type: "POST",
              url: "/Controller/action",
              data: data to pass,
              async: false,
              cache: false,
              success: function () {
                      $(".audiobtn").mousedown(function (e) {            
  
                          if (e.button == 0)
                          {
                              $("#ContextMenu").css('left', e.pageX + 5);
                              $("#ContextMenu").css('top', e.pageY + 5);
                              $("#ContextMenu").fadeIn(100);
                          }
                      });
              },
              error: function (error) {
                  alert(error);
                  console.log(error);
              }
          });
      })  
  
      $('#ContextMenu').click(function () {
  
      });
  })
  &lt;/script&gt;
  
  &lt;div id="ContextMenu"&gt;
      &lt;a href="~/audio/sounds.wav" download="sounds.wav"&gt;Save&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I would also like to hide the context menu if the user click anywhere else in the page or if the user clicks 'Save' in the context menu    </p>
  
  <p>Thank you</p>