Recently started developing a Wordpress theme relying heavily on the customizer API.

One thing I'm stuck with is detecting when a specific panel has been clicked or opened.

Regular old "on click" events are not working.

In another panel I have multiple controls and I'm able to detect when the form elements within are changed using something along the lines of:

api.controlConstructor.typography = api.Control.extend( {
    ready: function() {
        var control = this;
        control.container.on( 'change', '.typography-font-weight select',
            function() {
                control.settings.font_weight.set( $( this ).val() );
        control.container.on( 'change', '.typography-font-style select',
            function() {
                control.settings.font_style.set( $( this ).val() );

I'm able to get a lot of info if I run a console.log(control);

No way have I been able to find out how to detect when a specific panel is open though.

Any info or suggestions on a listener or something of the like would be greatly appreciated!

I should mention as well that this script resides in a customizer.js script that I'm enqueuing with the customize_controls_enqueue_scripts action.

1 Answer 1


Not sure how optimized this is, but I do believe this would work:

    $( '#widgets-right' ).delegate( '#customize-theme-controls', 'DOMNodeInserted', function( ev ) {
        $( '.control-section' ).click( function() {
            // Do stuff
    } );
  • Seems to fire 530 events for me
    – Runnick
    Nov 29, 2017 at 18:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.