I have created a javascript function which changes the css inside the preview when a input is focuses, this means I can bring up a modal when a text input is in focus. This works but as soon as I start to write in this input, the preview iframe gets refreshed, and this modal is no longer displayed even though the input is still selected.

How do I make this happen again when I start writing to the input and the Preview refreshes?

This is my code for it:

(function ( api ) {
  // Perform actions when focusing text inputs
  api.bind( 'ready', function() {

        $('#_customize-input-checkin\\[message\\]').focus(function() {
            var $iframe = $("#customize-preview iframe").contents();
            $("#alert_check_in_notification_sent", $iframe).css("display", "block");
            $("#check-in-wrap", $iframe).css("display", "none");

        $('#_customize-input-checkin\\[message\\]').blur(function() {
            var $iframe = $("#customize-preview iframe").contents();
            $("#alert_check_in_notification_sent", $iframe).css("display", "none");
            $("#check-in-wrap", $iframe).css("display", "unset");

  } );
} ( wp.customize ) );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.