为了与事件“添加的小部件”交互，您应该使用“customize\\u controls\\u enqueue\\u scripts”将JavaScript文件排队，以避免它成为重复加载预览iframe的一部分（其中$（document）不同于父页面文档）。

我能够使用以下示例与“添加的小部件”事件进行交互：

在主题的功能中。php

function custom_enqueue_scripts(){
    wp_enqueue_script( \'custom-script\', get_template_directory_uri() . \'/js/custom.js\',array(\'jquery\',\'customize-widgets\'),\'\',1 );

}
add_action(\'customize_controls_enqueue_scripts\',\'custom_enqueue_scripts\',10);

jQuery(document).ready(function($) {


    $( document ).on( \'widget-added\', function(event, widget) {
        console.log(widget);
    });



});

我认为您最好在侧栏级别处理更改，因为您希望根据侧栏中的小部件数量更改侧栏中所有小部件的类。

以下是帮助您入门的代码（灵感来自this):

(function($){
    $(document).on(\'ready\', function () {
        // Change this selector depending on your target widget area
        var widgetArea = $(\'#secondary .widget-area\');

        if (\'undefined\' !== typeof wp && wp.customize && wp.customize.selectiveRefresh) {
            wp.customize.selectiveRefresh.bind(\'sidebar-updated\', function (sidebarPartial) {
                if (\'sidebar-1\' === sidebarPartial.sidebarId) {
                    // Do something to the widgetArea or its children
                }
            });
        }
    });
})(window.jQuery);

我希望这有帮助。