{"id":18278519,"date":"2025-02-01T09:08:44","date_gmt":"2025-02-01T09:08:44","guid":{"rendered":"https:\/\/wordpress.org\/support\/topic\/mutationobserver\/"},"modified":"2025-02-01T09:08:44","modified_gmt":"2025-02-01T09:08:44","slug":"mutationobserver","status":"publish","type":"topic","link":"https:\/\/wordpress.org\/support\/topic\/mutationobserver\/","title":{"rendered":"MutationObserver"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Hello!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Could you please add the use of MutationObserver to your script. There is a javascript code example of how this might look like<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const wpcf7Forms = document.querySelectorAll( '.wpcf7' );<br \/><br \/>    if ( wpcf7Forms.length ) {<br \/>        for ( const wpcf7Form of wpcf7Forms ) {<br \/>            init(wpcf7Form);<br \/>        }<br \/>    }<br \/><br \/>    const observer = new MutationObserver((mutationList, observer) =&gt; {<br \/>        for (const mutation of mutationList) {<br \/>            for (let node of mutation.addedNodes) {<br \/>                if (!(node instanceof HTMLElement)) continue;<br \/>                const forms = node.querySelectorAll( '.wpcf7' );<br \/>                if ( forms.length ) {<br \/>                    for ( const form of forms ) {<br \/>                        init(form);<br \/>                    }<br \/>                }<br \/>            }<br \/>        }<br \/>    });<br \/>    observer.observe(document.body, {childList: true, subtree: true});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This is to make the script apply to dynamically loaded content, such as popups created with javascript code and ajax.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also, to be able to use it with ajax content, you need to modify this check in the method <code>\\CF7_AntiSpam\\Core\\CF7_AntiSpam::load_frontend() <\/code><br \/><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if ( ! is_admin() || wp_doing_ajax() ) {<br \/>    \/\/...<br \/>}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Thanks.<\/p>\n","protected":false},"template":"","class_list":["post-18278519","topic","type-topic","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/18278519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/18278519\/revisions"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=18278519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}