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
    } );
| improve this answer | |
  • Seems to fire 530 events for me – Runnick Nov 29 '17 at 18:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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