jQuery 脚本在 Wordpress 中不起作用

Question

我知道这个问题已经被问过很多次了，但我就是无法让 jQuery 在 Wordpress 中工作。

我有一个要与一些 wp_ajax 一起使用的表单，但在我到达这一点之前，我想确保它可以与 jQuery 交互。

表单 HTML 放置在页面上，如下所示：

<div id = "content">
   <form action= "" method= "post" id= "hfwpform">
      <label for= "fname">First Name</label></br>    
      <input type= "text" name= "fname" id= "fname" required></br>
      <label for= "email">Email Address</label></br>   
      <input type= "email" name= "email" id= "email" required></br>
      <label for= "message">Your Message</label></br>    
      <textarea name= "message" id= "message"></textarea>
      <input type= "hidden" name= "action" value= "contact_form">
      <input type= "submit" value= "Send">
   </form>
   </br></br>
   <div id= "feedback">My Feedback</div>
   </br></br>
</div>

我创建了一个用于我的主要 php 的插件。 在这个插件中，我创建了入队行。

add_action( 'wp_enqueue_scripts', 'load_scripts');

function load_scripts() {

    if ( !is_admin() ) {

        wp_register_script('hftest', get_template_directory_uri() . '/js/hf_test.js', array('jquery'), '1.0', false );
        wp_enqueue_script('hftest');
    }
}

我为我的脚本创建了一个名为“js”的子文件夹，当我提交表单时应该执行的脚本如下所示。

(function($) {
   $(document).ready(function() {
      $('#hfwpform').submit(function() {
         $response = "This is it!!!";
         alert("Submitted");
         $("#feedback").text($response);
      });
   });
 })( jQuery );

当我提交表单时，页面会重新加载，清除输入字段，而不是更改反馈文本并显示警告框。

我做错了什么？？？

问候 弗莱明

Answer 1

您的表单运行正常。您缺少的是在您的 js 中指定表单不通过默认功能执行。

您的代码应如下所示：

(function($) {
   $(document).ready(function() {
      $('#hfwpform').submit(function(e) {
         e.preventDefault(); //this is key
         $response = "This is it!!!";
         alert("Submitted");
         $("#feedback").text($response);
      });
   });
 })( jQuery );