jQuery HTML5表单
[英]JQuery HTML5 form
问题描述
I have a simple form: 
我有一个简单的表格：
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4" >
<form class="form-signin" role="form" id="login-form">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="email" class="form-control" placeholder="Email address" required autofocus>
<input type="password" class="form-control" placeholder="Password" required>
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit" id="login-but-sub">Sign in</button>
</form>
</div> <!-- form container -->
</div>
</div> <!-- /container -->
in an HTML 5 web app, (ember JS if it makes a diff), the HTML 5 form validation as described here works perfectly. 在HTML 5的web应用程序，（余烬JS，如果它使一个diff），如所描述的HTML 5表单验证这里完美地工作。 I am attaching a JQuery event as such: 我将这样附加一个JQuery事件：
$(function(){
/*Try to restore user once upon loading*/
restore_user();
App = Ember.Application.create({
LOG_TRANSITIONS: true, });
client = new client()
App.Router.map(function() {
this.route('login');
});
App.IndexRoute = Ember.Route.extend({
setupController: function(controller) {
console.log(client);
if(!client.isLoggedIn()){
this.transitionTo('login')
}
}
});
$("#login-but-sub").submit(function(event){
console.log("login clicked");
});
});
and the issue the event never seems to be fired... If I change it to: 和事件似乎从未被触发的问题...如果我将其更改为：
$("body").submit(function(event){
or 要么
$("body").on('submit','body',function(event)
then it also works. 然后它也可以工作。 what is wrong with the first one? 第一个有什么问题？
3 个解决方案
解决方案1
4 2014-05-05 14:02:37
The submit event is not fired on the <button> it's fired on the <form> . 提交事件不会在<button>上触发，它会在<form>上触发。
in your example the submit event bubbles up to the <body> 在您的示例中，submit事件冒泡到<body>
解决方案2
1 已采纳 2014-05-05 14:02:18
The submit event is sent to an element when the user is attempting to submit a form.
So, you should use .submit() for <form> elements: 因此，您应该将.submit()用于<form>元素：
$("#login-form").submit(function(event){
console.log("login clicked");
});
Seem like your form has been added dynamically, if yes then you need to use event delegation : 似乎您的表单已被动态添加，如果是，那么您需要使用事件委托 ：
$("body").on('submit','#login-form',function(event) {
console.log("login clicked");
});
解决方案3
0 2014-05-05 14:02:27
$('.form-signin').submit() will work.
提交事件属于表单，而不是提交按钮
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.