Question

我看到这出现在很多地方;然而，几个小时后，我仍然无法想出这个简单的事情。有人可以验证我的语法是否正确？

＆＃13;

$(document).ready(function(){	
    $("#login-form").on('submit', "#logout-btn", function() {
       alert("The logout button was clicked.");
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="login-form">
            <input placeholder="Username" id="formUsr" required>
            <input type="password" placeholder="Password" id="formPwd" required>

            <input id="logout-btn" type="submit" value="Login">
            <input id="login-btn" type="submit" value="Logout">
</form><!-- login form -->

＆＃13;

Answer 1

单击submit按钮时会触发submit事件，并且可能会有多个button元素被点击，而type="button|reset"元素没有Enter。它也可以由submit键触发。

您可以使用它来确定是否单击了注销按钮。但是，为了表单提交，$("#logout-btn").on('click', function(e) { e.preventDefault(); //prevents default action. alert("The logout button was clicked."); });事件是最可靠的。：

$(function() {
    $("#logout-btn").on('click', function(e) {
        e.preventDefault(); //prevents default action.
        alert("The logout button was clicked.");
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="login-form">
    <input placeholder="Username" id="formUsr" required/>
    <input type="password" placeholder="Password" id="formPwd" required/>

    <input id="login-btn" type="submit" value="Login"/>
    <input id="logout-btn" type="submit" value="Logout"/>
</form><!-- login form -->

$(function() {
    $(':submit').on('click', function(e) {
        e.preventDefault();
        if( $(this).is('#login-btn') ) {
            alert('login-btn clicked');
        } else if( $(this).is('#logout-btn') ) {
            alert('logout-btn clicked');
        } else {
            alert('some other submit button clicked');
        }
    });
});

另一种方法：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <form id="login-form">
        <input placeholder="Username" id="formUsr" required/>
        <input type="password" placeholder="Password" id="formPwd" required/>

        <input id="login-btn" type="submit" value="Login"/>
        <input id="logout-btn" type="submit" value="Logout"/>
    </form><!-- login form -->

MFC

Answer 2

试试这个：

$("#login-form").submit(function() {
   alert("The logout button was clicked.");
});

Answer 3

存储最后点击按钮的值，并在.submit()事件中，确保最后点击的按钮是注销按钮。这是有效的，因为在.click()事件之前触发了.submit()事件：

$(document).ready(function() {
    //The logout button:
    var logoutButton = $("#logout-btn");
    //This variable holds the button in #login-form that the user last clicked:
    var lastClicked = null;
    //When the user clicks a button in #login-form, set it equal to lastClicked:
    $("#login-form input[type=submit]").click(function() {
        lastClicked = $(this);
    });
    //When the form is submitted, if it was the logout button, call the alert:
    $("#login-form").on('submit', function() {
       if (lastClicked.is(logoutButton)) {
           alert("The logout button was clicked.");
       }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="login-form">
            <input placeholder="Username" id="formUsr" required>
            <input type="password" placeholder="Password" id="formPwd" required>

            <input id="login-btn" type="submit" value="Login">
            <input id="logout-btn" type="submit" value="Logout">
</form><!-- login form -->

jQuery .on不工作

3 个答案: