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