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 );

jQuery脚本在Wordpress中不起作用

1 个答案: