ハンドルバーのフォーム送信が機能しません

Question

私はフォームを持っています。誰も助けることができますか？

<script id="chat-window-template" type="text/x-handlebars-template"> 
 
     <a href="#" class="close"><i class="fa fa-times"></i></a> 
 
     <a href="#"> 
 
     <span class="pull-left"> 
 
     <img src="{{ user_image }}" width="40"> 
 
     </span> 
 
     <span class="contact-name">{{user}}</span> 
 
     </a> 
 
    <div class="panel-body" id="chat-bill"> \t 
 
\t <form id="messageForm"> 
 
\t <input id="nameInput" type="hidden" class="input-medium" value="Macbook" /> 
 
\t <input id="messageInput" type="text" class="form-control" placeholder="Digite uma mensagem..." /> 
 
\t <input type="submit" value="Send" /> 
 
\t </form> 
 
    </div> 
 
</script>

$("#messageForm").submit(function() {alert();}); 

Answer 1

おそらくハンドラはドムがコンパイルされる前に、セレクタによってトンのボディイベント、およびフィルタリングを聞いてみてください、...

ドムに耳を傾ける必要がありすぎて、将来的に追加したノード取り付けられています。

$(document.body).on("submit", "#messageForm", function() {alert();}); 

Answer 2

送信時にJSを実行する別の方法は、フォーム要素onsubmit属性からfalseを返すことです。

template.hbs

<form id="myForm" onsubmit="myFunc(); return false;"> 
    <input id="textInput" type="text"></input> 
    <input type="submit"></input> 
</form> 
... 
<script src="js/handleForm.js" type="text/javascript"></script> 

handleForm.js

function myFunc() { 
    console.log("yo"); 
} 

これは、ブラウザのコンソールに "ヨ" ログに記録されます。これは、onsubmit属性でfalseを返すと、ブラウザのデフォルトのアクション（htmlのものであり、ノードやhbsのものではない）が妨げられるために機能します。したがって、ページはリロードされず、クエリ文字列はハイパーリンクに追加されませんが、myFunc（）は実行されます。

フォームデータを扱う場合は、好きなようにDOMから取得するだけです。 1つのオプションは、テキスト入力にIDを入れて（私はtemplate.hbsで行われてきたように）などのようにjQueryを使ってそれを暗礁することです：

handleForm.js（改訂版）

function myFunc() { 
    var formText = $("#textInput").val(); 
    // Do something with formText 
}