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">	
	<form id="messageForm">
	   <input id="nameInput" type="hidden" class="input-medium" value="Macbook" />
	   <input id="messageInput" type="text" class="form-control" placeholder="Digite uma mensagem..." />
	   <input type="submit" value="Send" />
	</form>
   </div>
</script>

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

Answer 1

也许处理程序在编译Dom之前附加，尝试侦听t body事件，并通过选择器进行过滤，应该监听将来添加的Dom节点...

$(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");
}

这将在浏览器控制台中记录“yo”。它的工作原理是因为在onsubmit属性中返回false会阻止浏览器的默认操作（这是一个html的东西，而不是一个节点或hbs的东西）。因此，页面将不会重新加载，并且不会向超链接添加查询字符串，但myFunc（）将运行。

如果您想使用表单数据，只需从DOM中获取它即可。一个选项是在文本输入上放置一个id（就像我在template.hbs中所做的那样）并使用jQuery来阻止它：

handleForm.js（已修订）

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

把手表单提交无效

2 个答案: