When Contact Form Validation Text Changes Do Something ONCE

Hi all,

I’m an using a single form (Contact Form 7), and trying to add an image to the form response div when the button submit button is pressed.

So far, I was able to get the image added by using:

$('.wpcf7-response-output').bind("DOMSubtreeModified",function(){
            let nessieLarge = ('<img src="/wp-content/uploads/2020/04/nessie-icon-large.png" class="nessie-confirmation" />');
            $(nessieLarge).appendTo('.wpcf7-response-output');
        });
    });

However, this isn’t idea because it added the image image about 100 times (not sure why)!

I just need it to add it once. SO, I tried to wrap this like the code below, however, while this doesn’t throw errors, it doesn’t output or appendTo the image.

Is there another way I should be combining the .bind and .one functions to get this to output an image ONCE when the submit button is pressed and the output text changes?

$('.wpcf7-response-output').bind("DOMSubtreeModified",function(){
        $(this).one(function () {
            let nessieLarge = ('<img src="/wp-content/uploads/2020/04/nessie-icon-large.png" class="nessie-confirmation" />');
            $(nessieLarge).appendTo('.wpcf7-response-output');
        });
    });

This is the basic markup I’m trying to manipulate:

<div class="wpcf7-response-output wpcf7-display-none wpcf7-validation-errors" style="display: block;" role="alert">Looks like something is missing, double check your info.</div>

And, here’s the website! Form is a scroll down.
https://nessiedev.wpengine.com/#contactForm

Thank you kindly for your thoughts on this!

So you’ve bound something that says “When something under this is modified, fire this function.”
The function then… modifies something underneath the trigger element.

Do we perhaps see why that might be a problem?

Incidentally, “DOMSubtreeModified” is a Deprecated event.