Customizer – binding jQuery created controls

Thanks Tom,

Example:

  1. Just download the plugin WPSE 286375: A dynamic dropdown-pages control from here:

  2. Extract next two files in the wp plugin folder: (wp-contents/plugins)

    wpse-286375-controls.js and 
    wpse-286375.php
    
  3. Activate WPSE 286375 plugin

  4. Go to wp dashboard/Customize/Homepage Settings

    there are 2 controls – Homepage and Posts Page
    with control’s IDs “page_on_front” and “page_for_posts”

    and

    third control – Featured Page (it is from the activated plugin) with control ID
    “special_page”

    It is created with jQuery in wpse-286375-controls.js via:

    component.addControl = function() {
    api.control.add( new api.Control( 'special_page', _.extend(
      {},
      component.defaultParams,
      {       type: 'dropdown-pages',
              section: 'static_front_page',
      }) ) );};
    
  5. Copy next code in your working project in your file customize-controls.js and debug
    it with chrome/firefox:

    wp.customize('page_on_front', function( value ) {
              // Listen to value changes.
                       value.bind( function( to ) {
                                var answer = to;
                 });});
    

    Try to change something in Homepage control and voila the bind works and in
    var answer we can see the page ID of Home page.

  6. Now change the ID of Featured Page only:

       wp.customize('special_page', function( value ) {                                
    // Listen to value changes.                                                       
         value.bind( function( to ) {                                                 
                  var answer = to;                                                     
       });});
    

Try to change something in Featured Page control -> No bind and Nothing happen!