jQuery HTML5表单

Question

我有一个简单的表格：

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

在HTML 5的web应用程序，（余烬JS，如果它使一个diff），如所描述的HTML 5表单验证这里完美地工作。 我将这样附加一个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");
});

});

和事件似乎从未被触发的问题...如果我将其更改为：

    $("body").submit(function(event){

要么

    $("body").on('submit','body',function(event)

然后它也可以工作。 第一个有什么问题？

Answer 1

提交事件不会在<button>上触发，它会在<form>上触发。

在您的示例中，submit事件冒泡到<body>

Answer 2

从文档：

当用户尝试提交表单时，submit事件被发送到一个元素。 它只能附加到元素上。 可以通过单击显式，或或在某些表单元素具有焦点时按Enter来提交表单。

因此，您应该将.submit()用于<form>元素：

$("#login-form").submit(function(event){
    console.log("login clicked");
});

似乎您的表单已被动态添加，如果是，那么您需要使用事件委托 ：

$("body").on('submit','#login-form',function(event) {
    console.log("login clicked");
});

Answer 3

$('.form-signin').submit() will work.

提交事件属于表单，而不是提交按钮

jQuery HTML5表单

问题描述

3 个解决方案

解决方案1
4 2014-05-05 14:02:37

解决方案2
1 已采纳 2014-05-05 14:02:18

解决方案3
0 2014-05-05 14:02:27

jQuery HTML5表单

问题描述

3 个解决方案

解决方案1 4 2014-05-05 14:02:37

解决方案2 1 已采纳 2014-05-05 14:02:18

解决方案3 0 2014-05-05 14:02:27

解决方案1
4 2014-05-05 14:02:37

解决方案2
1 已采纳 2014-05-05 14:02:18

解决方案3
0 2014-05-05 14:02:27