Пользовательский JavaScript в WordPress Contact Form 7 не работает

Question

Я пытаюсь скрыть контактную форму после того, как она прошла проверку и отправлена. Я хочу сделать это с помощью простой пользовательской функции JavaScript.

Дело в том, что консоль постоянно сообщает мне, что моя функция JS не определена. Сначала я подумал, что это может произойти, потому что я неправильно ставлю *.js, но это не так - мой custom.js четко виден в исходном коде страницы, и его содержимое соответствует тому, что я поставил внутри.

Вот мой код до сих пор.

functions.php (дочерняя тема)

add_action( 'wp_enqueue_scripts', 'for_contact' );
function for_contact() {
    wp_enqueue_script(
        'contactFormHide',
        get_stylesheet_directory_uri() . '/custom.js',
        array('jquery')
    );
}

custom.js

var $j = jQuery.noConflict();

$j(document).ready(function() {
    "use strict";

    function contactFormHide (){
        $('.section_inner_margin').css('display','none');
        $('.section_inner').html('<div class="wpcf7-response-output wpcf7-display-none wpcf7-mail-sent-ok" style="display: block;" role="alert">Your message has been sent.</div>');
    }

});

Настройки формы контакта 7 (вкладка "Дополнительные настройки")

on_sent_ok: "contactFormHide()"

Что я делаю не так, и как я могу это исправить?

Answer 1

Исправление в коде. Определите $ в функции.

var $ = jQuery.noConflict();

function contactFormHide(){
            $('.section_inner_margin').css('display','none');
            $('.section_inner').html('<div class="wpcf7-response-output wpcf7-display-none wpcf7-mail-sent-ok" style="display: block;" role="alert">Your message has been sent.</div>');
        }

Answer 2

Решение Ахмеда Гинани, вероятно, сработает, но вы также пытались передать $ как параметр внутри полностью автономной функции следующим образом:

(function($) {
    $(document).ready(function() {
        "use strict";

        function contactFormHide (){
            $('.section_inner_margin').css('display','none');
            $('.section_inner').html('<div class="wpcf7-response-output wpcf7-display-none wpcf7-mail-sent-ok" style="display: block;" role="alert">Your message has been sent.</div>');
        }
    });
})(jQuery);

Таким образом, вы передаете jQuery объект в качестве аргумента function, Это означает, что мы можем использовать $ локально внутри функции без конфликта с другими скриптами / фреймворками / библиотеками и т. д...