Question

我有一个通过jQuery提交的联系表单。它在HTML / PHP / JS模板上运行得很好，但是当我在WordPress上使用它时效果不好。

表单是提交的，但提交函数中的jquery代码就像不退出。它不会检索任何错误，但加载器不会出现，并且不会发生jquery验证：

<form method="post" action="<?php echo get_template_directory_uri() . '/templates/contact.php' ?>" name="contactform" id="contactform">
                <div class="col-sm-6">
                    <fieldset>
                        <input name="name" type="text" id="name" size="30" value="" placeholder="Name" />
                        <br />
                        <input name="email" type="text" id="email" size="30" value="" placeholder="Email" />
                        <br />
                        <input name="phone" type="text" id="phone" size="30" value="" placeholder="Phone" />
                        <br />
                    </fieldset>
                </div>
                <div class="col-sm-6">
                    <fieldset>
                        <textarea name="comments" cols="40" rows="8" id="comments" placeholder="Message"></textarea>
                        <button type="submit" class="btn btn-green-border btn-lg" id="submit" value="submit">Send Message</button>
                    </fieldset>
                </div>
            </form>

这是jQuery：

// Send email 
    jQuery('#contactform').submit(function ($) {

        var action = $(this).attr('action');

        $("#message").slideUp(750, function () {
            $('#message').hide();

            $('#submit')
                .after('<img src="images/loader.gif" class="loader" />')
                .attr('disabled', 'disabled');

            $.post(action, {
                    name: $('#name').val(),
                    email: $('#email').val(),
                    phone: $('#phone').val(),
                    comments: $('#comments').val(),
                    verify: $('#verify').val()
                },
                function (data) {
                    document.getElementById('message').innerHTML = data;
                    $('#message').slideDown('slow');
                    $('#contactform img.loader').fadeOut('slow', function () {
                        $(this).remove()
                    });
                    $('#submit').removeAttr('disabled');
                    if (data.match('success') != null) $('#contactform').slideUp('slow');

                }
            );

        });

        return false;

    });

可能是什么问题？

Answer 1

    jQuery('#contactform').submit(function ($) {

尝试删除$ in函数（）

    jQuery('#contactform').submit(function () {

Answer 2

您的Wordpress安装可能正在使用与您的代码不兼容的jQuery版本，请尝试包含更新版本

Answer 3

我相信你正在使用你的jquery内联。

我就是这样做的（正确方法）。

在主题js文件夹中创建一个文件，并将其命名为contactform-js.js
复制jquery代码并将其粘贴到这个新文件中。
在functions.php中注册新的js文件

这应该解决你的一些问题。

function register_contact_script() {
    wp_enqueue_script( 'contact-script', get_template_directory_uri() . '/js/contactform-js.js', array( 'jquery' ), '' , true );
}

add_action( 'wp_enqueue_scripts', 'register_contact_script' );

在WordPress上不起作用的jQuery代码

3 个答案: