customization - Bind JS event to Wordpress control customizer

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' );

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' );

• customization
• theme-customizer

Share Improve this question asked Oct 21, 2018 at 22:04 gdfgdfggdfgdfg 17211 silver badge1515 bronze badges 1

• Check with below $('.element_class').on('click', function(event) { console.log(5); }); – Mehul Commented Oct 22, 2018 at 11:29

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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 );