JSFiddle - React, Tailwind, and code Playground

HTML

<div id="randomThing"></div>

JavaScript

jQuery( document ).ready( function ( $ ) {
    var $rndThing = $( '#randomThing' );

    // This one does work properly
    $rndThing.on( 'awesome', function ( e ) {
        $(this).append( $( '<p>' ).text( 'Event triggered: ' + e.type ) );
    } );
    $rndThing.trigger( 'awesome' );

    // This should trigger the event, but in Firefox it doesn't
    $rndThing.on( 'watch', function ( e ) {
        $(this).append( $( '<p>' ).text( 'Event triggered: ' + e.type ) );
    } );
    $rndThing.trigger( 'watch' );

    // This one doesn't work in most browsers
    $rndThing.on( 'toString', function ( e ) {
        $(this).append( $( '<p>' ).text( 'Event triggered: ' + e.type ) );
    } );
    $rndThing.trigger( 'toString' );
} );