Detecting WordPress Customizer Panel

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.

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