javascript - wp.customize.bind ready event not fired

I'm trying to add some javascript to my theme customizer. My JS file is loaded no problem and my document ready event works but wp.customize.bind() isn't calling my callback.

jQuery(document).on('ready', function(){
  console.log('binding')
  wp.customize.bind('ready', function(){
    console.log('ready')
  })
})

binding gets outputed to the console but ready does not.

What am I missing? there seems to be little to no documentation on using the javascript here.

I'm trying to add some javascript to my theme customizer. My JS file is loaded no problem and my document ready event works but wp.customize.bind() isn't calling my callback.

jQuery(document).on('ready', function(){
  console.log('binding')
  wp.customize.bind('ready', function(){
    console.log('ready')
  })
})

binding gets outputed to the console but ready does not.

What am I missing? there seems to be little to no documentation on using the javascript here.

• javascript
• theme-customizer

Share Improve this question asked Sep 12, 2016 at 8:36 ArcathArcath 23911 gold badge33 silver badges99 bronze badges 2

• This might help: wordpress.stackexchange/questions/211779/… – cjbj Commented Sep 12, 2016 at 12:27
• I have the exact same problem. Binding logs, ready not. That there is so little documentation available to the javascript API is really frustrating. – Snowball Commented Sep 16, 2016 at 4:55

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 5

Do not put the Customizer ready event handler inside of the jQuery event handler. The Customizer ready will trigger at jQuery ready, so you are adding the event handler too late. Just do:

wp.customize.bind('ready', function(){
    console.log('ready');
});

Your JS needs to be enqueued with customize-controls script as its dependency. Enqueue at the customize_controls_enqueue_scripts action.

I had same problem. The reason it was not binding for me was because I had this error "Uncaught TypeError: Cannot read property 'unsync' of undefined" on my console.

It was caused because I removed the header_textcolor settings from the theme template by using $wp_customize->remove_setting( 'header_textcolor' ); but it was still being referenced in the js.

After fixing this, bind worked as intended.