Bind JS event to Wordpress control customizer

Question

I want to bind a click event to Wordpress custom control (Theme Customizer). I have tried with (customizer.js):

$(document).on('click', '.element_class', function () {
    console.log(5);
});

, but it doesn't bind.

The control is something like :

<div class="element_class">
   Value
</div>

functions.php:

function customizer_live_preview() {
wp_enqueue_script(
    'theme-customizer',
    get_stylesheet_directory_uri() . 'customizer.js',
    array( 'customize-preview' ), '0.1.0', true);
} 
add_action( 'customize_preview_init', 'customizer_live_preview' );

Answer 1

You need to enqueue a separate script on a different action with a different dependency.

/**
 * Enqueue styles and scripts for the Customizer pane.
 */
function mytheme_customize_pane_enqueue() {
    wp_enqueue_script( 'mytheme-customizer-control',
        get_template_directory_uri() . '/js/customizer-control.js',
        array( 'customize-controls' ), '20180924', true );
}
add_action( 'customize_controls_enqueue_scripts', 'mytheme_customize_pane_enqueue' );

The JS looks like this:

( function( wp, $ ) {
    wp.customize.control( 'mytheme_option', function( control ) {
        control.container.on( 'click', '.element_class', function( event ) {
            event.stopPropagation();
            //control.doNotice( '' );
            //control.applyPresetValues( $( this ).data( 'revert' ) );
        } );
    } );
} )( wp, jQuery );