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.
Share Improve this question asked Sep 12, 2016 at 8:36 ArcathArcath 2391 gold badge3 silver badges9 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
2 Answers
Reset to default 5Do 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.