jQueryスクリプトはWordpressで動作しません

Question

この問題はたくさん聞かれましたが、私はWordpressで動作するjQueryを取得できません。

私はいくつかのwp_ajaxで使用されるフォームを持っていますが、この時点までにjQueryとやり取りできるようにしたいと考えていました。

フォームHTMLをページ上に配置し、このようになりますされています。私は、私は私のメインのphpのために使っていたプラグインを作成してい

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

。 このプラグインでは、エンキュー行を作成しました。

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

。あなたが欠けているのは、デフォルトの機能を使ってフォームを実行しないようにj内で指定することです。

あなたのコードは次のようになります。

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