自定义程序预览位于与包含自定义程序控件的窗口不同的窗口中。具体而言，自定义程序预览包含在iframe. 这就是为什么不能直接使用jQuery来选择元素。解决此问题的一种方法是使用parent.jQuery 从预览中删除，但不建议这样做，因为自定义程序预览实际上可能完全位于单独的域上，并且这样的调用将违反浏览器中的同源策略。因此，如果希望与预览中的控件交互，则需要将消息从预览传递到窗格。这方面的例子可以在core中看到，特别是在customize-selective-refresh.js 它将focus-control-for-setting 消息，然后输入customize-controls.js 接收此消息的位置。下面是一个独立的示例，以及当您将鼠标悬停在站点标题上时，如何获取给定控件的根jQuery容器。

将此脚本排队wp_enqueue_scripts 操作如果is_customize_preview(), 让它拥有customize-preview 脚本作为其依赖项：

// customize-preview-example.js
(function( api, $ ) {
    api.bind( \'preview-ready\', function() {

        $( \'.site-title\' ).on( \'mouseover\', function() {
            api.preview.send( \'site-title-mousedover\', \'some optional message value\' );
        } );

    } );
}) ( wp.customize, jQuery );

然后在控件中运行的脚本(parent) 取决于的窗口customize-controls 并在customize_controls_enqueue_scripts 措施：

// customize-controls-example.js
(function( api ) {
    api.bind( \'ready\', function() {

        // Wait for the site title control to be added.
        api.control( \'blogname\', function( siteTitleControl ) {
            api.previewer.bind( \'site-title-mousedover\', function( message ) {
                console.info( \'Message sent from preview:\', message );
                console.info( \'The jQuery container element for the site title control:\', siteTitleControl.container );
            } );
        } );
    } );
}) ( wp.customize );

也就是说，要小心使用jQuery操纵控件。自定义程序控件与其关联的自定义程序设置相关联。如果要更改给定控件输入中显示的值，则需要修改与其关联的设置，而不是直接修改控件的输入。此外，如果要隐藏控件，则要查找的是active_callback 在添加的控件上。