Unable to trigger events in jQuery

Question

I want to trigger a context menu event in jQuery on a audio element. Here is the code:

$("audio").contextmenu();

However, this does not show a context menu for the element. I thought maybe there is need for some user interaction so I wrapped it in a moueenter event.

$("audio").on("mouseenter", function(e) {
   $(this).contextmenu();
}

However, the context menu still does not appear. Finally, I decided to do the right click on the audio element manually and trigger a key press event but it also did not seem to do anything.

$("audio").on("contextmenu", function(e) {
  var code = 86;
  $(this).trigger(
    jQuery.Event( 'keydown', { keyCode: code, which: code } )
  );
});

This code snippet was supposed to trigger a jQuery keypress event with "v" pressed.

When we right click on an audio element and press "v", it shows a save audio as dialog. I wanted to write the code to trigger the context menu and keypress programatically but none of them seem to have any effect. Why is that?

May I see your html code? – Jerdine Sabio Sep 27 '18 at 12:00 — Jerdine Sabio, Sep 27 '18 at 12:00
Here, is `audio` ID or class of the element? – Yogesh Patel Sep 27 '18 at 12:05 — Yogesh Patel, Sep 27 '18 at 12:05
@yogeshpatel probably neither, but the ` – Calvin Nunes Sep 27 '18 at 12:06 — Calvin Nunes, Sep 27 '18 at 12:06

Jerdine Sabio · Answer 1 · 2018-09-27T13:20:58.247

You can trigger the right click menu on your audio element but only if you right click on it. Be sure to add the 'controls' attribute to your audio element so that there would be something to click on. Try it on the code below.

$("audio").on("contextmenu", function(e) {
  alert("Hello Context Menu!");
});

$("button").on("click", function(){
  $("audio").contextmenu();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="t-rex-roar" controls src="https://soundbible.com/mp3/Tyrannosaurus%20Rex%20Roar-SoundBible.com-807702404.mp3">
</audio>
<button>Call Context Menu Event for Audio Element, Event only</button>

However, you can't add a button click event that displays the context menu for another element; Programmatically Calling Browser Right-Click Menu Options?

Unable to trigger events in jQuery

1 Answers1