jquery - 为什么我无法触发提交按钮最接近的表单？

Question

为什么我无法在下面的示例中触发提交按钮最接近的表单？

html，

<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

jquery，

$('input[type=submit]').click(function(){

    $(this).closest('form').unbind('submit').submit(function(){
           alert("hello world");
        return false;
    });
    return false;
});

我应该收到警报消息，但我不能。我做错了什么？

jsfiddle

Answer 1

哇，有很多冒泡事件...

您不断返回 false 并绑定(bind)和取消事件...这将不起作用，但您可以简单地将您的 submit 按钮更改为普通的 button，例如:

<form name="input" action="html_form_action.asp" method="get">
    Username: <input type="text" name="user" />
    <input type="button" value="Submit" class="btn-submit" />
</form>

并写

$(".btn-submit").click(function() {
    $(this).prop("disabled", true); // dont allow more clicks 
    alert('about to submit...');
    $(this).closest("form").submit();
    alert('done!');
});

<小时/>

JsBin 中的演示:http://jsbin.com/elokov/1/

<小时/>

使用ajax调用来提交表单

$(".btn-submit").click(function(evt) {
    $(this).prop("disabled", true); // dont allow more clicks 
    alert('about to submit...');

    var frm = $(this).closest("form"); // our form

    $.ajax(
        type: frm.attr("method"),
        url:  frm.attr("action"),
        data: frm.serialize(),
        success: function(data) {
            alert('all went well');
        },
        success: function(jqXHR, textStatus) {
            alert('err, something messed up! ' + textStatus);
        }
    );

    return false; // or use evt.preventDefault();
});