Hi I am trying to do a button for user to insert a template of shortcode like [commit_shortcode commit_ids=""]. To achieve that I created a button next to Add Media button, called Add Commit Lists.

But apparently click on it does not firing an event to catch and execute js script.

How I am adding a button and js script for it:

        add_action('media_buttons', function() {
            echo '<button type="button" id="insert-my-commits" class="button insert-my-commits">Add Commit List</button>';
        }, 100);

        add_action( 'wp_enqueue_media', function (){
            wp_enqueue_script('media_button',
                OWD_VCS_MANAGER_PLUGIN_URL . 'assets/js/addCommitListButton.js',
                ['jquery'],
                '1.0.0',
                true);
        }, 100);

And my js script for handling adding a shortcode to editor:

jQuery( function( $ ) {
    $( '.insert-my-commits' ).click( openMediaWindow );

    console.log('It is working here');
    
    acf.addAction( 'load', function() {
        $( '.insert-my-commits' ).on( 'click', function() {

            console.log('It is NEVER working here');
            
            openMediaWindow();
        } );
    } );

    function openMediaWindow() {
            wp.media.editor.insert('[commit_shortcode commit_ids=""]');
    }
} );

It looks like something is catching click event and stopping my script from execution. If anyone has an idea I would be greatly thank you. Also I was using this tutorial: https://www.sitepoint.com/adding-a-media-button-to-the-content-editor/