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

Ahmed Ginani的解决方案可能会有效，但您是否尝试将$作为参数传递到一个完全自包含的函数中，如下所示：

(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。这意味着我们可以在函数内部使用$，而不会与其他脚本/框架/库等发生冲突......

WordPress联系表单7中的自定义JavaScript无效

2 个答案: