The right way to get a customized subject in theme customizer to reside replace the ingredient in preview window?

I created a customized subject for theme customizer, and all works tremendous to show the sphere, save the worth to the DB and retrievable by way of get_theme_mod(), but it surely doesn’t reside replace within the preview window. I’ve to reload the web page to see the change.

The preview does refresh on every change of the fields and the Publish button is activated, however now I would like the change to be detected and processed by the wp.customise javascript API.

The end result from the customized subject coding

Based mostly on a number of searches, I’ve tried the next strategies with out success. Word that is simply a part of the code. The retrieved worth makes use of the respective ID for every subject setting that are head1font and head1size however the beneath is simply of 1. The code exhibits the 2 strategies tried, however be aware that each aren’t used on the similar time.

add_action('customize_controls_print_scripts', perform() 
{
  echo'
  <script>
    jQuery(perform($) {
     // setting.bind methodology
      wp.customise("head1font", perform(setting) {
        setting.bind(perform(worth) {
            $("h1.pagetitle").css("font-family",worth);
        });
      });

    // different methodology tried worth.bind
      wp.customise("head1font", perform(worth) {
        worth.bind(perform(newval) {
            $("h1.pagetitle").css("font-family",newval);
        });
      });
    });
  </script>
 ';
});

The console be aware doesn’t appear relevant. The next is the discover when a change motion happen.

Error parsing a meta ingredient's content material: ';' will not be a sound key-value pair separator. Please use ',' as an alternative.

I’m now at a loss for an answer so I’m searching for tricks to make this work.