I am trying to reduce my use of jQuery, and trigger an event using the Event constructor in JS.

The jQuery trigger call I am trying to replicate is

$(document).trigger('menu.refreshOptions');

The menu.refreshOptionsevent is listened to and handled in a separate file, with $(document).on('menu.refreshOptions', syncMenu);

In the file I'm working in, I'm trying to construct a new custom event to trigger this.

I have tried both:

let event = new CustomEvent('menu.refreshOptions', {bubbles:true});
document.dispatchEvent(event);

and

 document.dispatchEvent(new Event('menu.refreshOptions'));

In both cases, I have confirmed the event is created, but I never reach the event handler function syncMenu as mentioned above.

I'm not sure what I'm doing wrong here. Is the fact that the handler is written in jQuery preventing this JS event from being caught? Any help would be really appreciated!