Question

我无法解决这个问题，因为它不仅仅涉及将Jquery移动到页脚。在WP主题的顶部有一个我打算使用JavaScript在同一页面中发送的表单。我将代码放在页脚中，因为它在标题中不起作用。问题是我在头文件中加载Jquery，因为我在页面顶部有另一个函数和需要首先加载Jquery的小部件。所以我无法将Jquery移到最底层。

但是我用来发送表单的问题<script>将不起作用，除非Jquery在它之前的页脚，我不知道为什么。

表格：

<form action="" id="form1" name="form1" method="post">
     <p>
         <input name="name" type="text" class="form-textfield-header" id="textfield1" placeholder="Name"></p>
      <p>
         <input name="company" type="text" class="form-textfield-header" id="textfield2" placeholder="Company"></p>
         <p>
         <input name="url" type="text" class="form-textfield-header" id="textfield3" placeholder="Site url"></p>
         <p>
             <input name="email" type="email" class="form-textfield-header" id="email" placeholder="Email"></p>
      <p>
             <textarea name="details" class="form-textarea-header" id="textarea" placeholder="Project details"></textarea></p>
      <p>
             <input type="submit" name="submit" id="submit" value="Submit" class="btn btn-secondary"></p>

       </form>

功能：

<!-- Send form -->
<script>
$(function() {

    var theForm = $("#form1");

    theForm.validate({

    submitHandler: function(theForm) {

    $('#loader', theForm).html('Please Wait...');

    $.ajax({
    type: "POST",
    url: "<?php echo get_template_directory_uri(); ?>/send.php",
    data: $(theForm).serialize(),
    timeout: 20000,

        success: function(msg) { $(theForm).fadeOut((500, function(){ 

                    $(theForm).html("<h2 class='messagesent'>Thank you. We will contact you shortly.</h2>").fadeIn(); 

                    }));
                },

                error: $('.thanks').show()

            });

            return false;
        }
    });
});
</script>

Answer 1

将$(function() {替换为jQuery(function($) {。 $

可能存在冲突

除非Jquery在页脚中，否则JS代码将无法工作

1 个答案: