Customizer.js changes not being recognized

Question

I've been experimenting with the Theme Customizer API and I'm trying to set up the live preview for changes made with the Customizer.

The setting I use works just fine when using the refresh attribute, but when I tried to use postMessage I ran into a problem. I wrote the necessary lines of code to make the setting work with live previewing, but my browser doesn't recognize the changes made (and saved) to the customizer.js file.

The setting I use:

$wp_customize->add_setting( 'dvekocky_header_title', array(
   'default' => esc_html__('Simple, Reliable and Awesome.', 'dvekocky' ),
   'type' => 'theme_mod',
   'transport' => 'postMessage' 
));

JS code:

( function( $ ) {
// Site title and description.
wp.customize( 'blogname', function( value ) {
    value.bind( function( to ) {
        $( '.navbar-brand a' ).text( to );
    } );
} );
wp.customize( 'blogdescription', function( value ) {
    value.bind( function( to ) {
        $( '.site-description' ).text( to );
    } );
} );
// Header text color.
wp.customize( 'header_textcolor', function( value ) {
    value.bind( function( to ) {
        if ( 'blank' === to ) {
            $( '.site-title, .site-description' ).css( {
                'clip': 'rect(1px, 1px, 1px, 1px)',
                'position': 'absolute'
            } );
        } else {
            $( '.site-title, .site-description' ).css( {
                'clip': 'auto',
                'color': to,
                'position': 'relative'
            } );
        }
    } );
} );

wp.customize( 'dvekocky_header_title', function( value ) {
    value.bind( function( to ) {
        $( '.intro-section h1' ).text( to );
    } );
} );

wp.customize( 'dvekocky_header_subtitle', function( value ) {
    value.bind( function( to ) {
        $( '.intro-section h5' ).text( to );
    } );
} );
} )( jQuery );

JS code inspected in browser:

( function( $ ) {
    // Site title and description.
    wp.customize( 'blogname', function( value ) {
        value.bind( function( to ) {
            $( '.site-title a' ).text( to );
        } );
    } );
     wp.customize( 'blogdescription', function( value ) {
        value.bind( function( to ) {
            $( '.site-description' ).text( to );
        } );
     } );
// Header text color.
    wp.customize( 'header_textcolor', function( value ) {
        value.bind( function( to ) {
            if ( 'blank' === to ) {
                $( '.site-title, .site-description' ).css( {
                    'clip': 'rect(1px, 1px, 1px, 1px)',
                    'position': 'absolute'
                } );
            } else {
                $( '.site-title, .site-description' ).css( {
                    'clip': 'auto',
                    'color': to,
                    'position': 'relative'
                } );
            }
        } );
    } );
 } )( jQuery );

Long story short - the scripts behaves as if no changes were ever made to it, even though I saved them and can see them when I open the file in my text editor.

I hope I described my problem well enough and hope some of you can help me. I don't doubt the issue is trivial, but I just can't figure it out.

PS: When I used the refresh method to preview changes, everything went smoothly. Now I can still make changes, but I can only see them when I save & publish them through Customizer and then manually reload the page.

Answer 1

It's been a while since you wrote, but I was having the same problem and your question allowed me to solve it, so thank you! I was going crazy trying to figure it out. I am working from Underscores, as it looks like you are, and the fix was to change the script's version number.

Where you enqueue your customizer.js script (near the bottom of inc/customizer.php in Underscores) change the version number to today's date, or tomorrow's, a la '20160215'. Mine was 20130508 previously, but once I changed it the current version of the script was loaded and my custom controls were affected by the JavaScript.