Callback After WordPress Customizer Complete Loading

Question

I'm facing a problem and it is that I'm trying to select textarea inside text widget, but problem is customizer appends dynamically content inside it so I'm unable to select it. I have successfully selected list inside which widget content is:

jQuery('[id^="customize-control-widget_text"]').each(function(){
    var each_text_widget_id = jQuery(this).attr('id');
    var textarea_inside_text_widget = $("#"+ each_text_widget_id ).find('textarea').attr('id'); // Not Working Since Dynamically Appending

});

This problem solves if I put this code inside setInterval but that is not really good way of doing it. So I'm looking for callback function after customizer loads.

Answer 1

You need to wait for the widget control to be created before you can attempt to . You can do this by listening for the add event on wp.customize.control. Here's some example code that will do what you want:

( function( api ) {
    function handleTextWidgetControl( control ) {
        if ( ! control.extended( api.Widgets.WidgetControl ) ) {
            return;
        }
        if ( 'text' !== control.params.widget_id_base ) {
            return;
        }

        /*
         * Make sure the widget's contents are embedded; normally this is done
         * when the control is expanded, for DOM performance reasons.
         */
        control.embedWidgetContent();

        // Now we know for sure the widget is fully embedded.
        console.info( control.container.find( 'textarea' ).attr( 'id' ) );
    }
    api.control.each( handleTextWidgetControl );
    api.control.bind( 'add', handleTextWidgetControl );
})( wp.customize );