为什么我无法在下面的示例中触发提交按钮最接近的表单?
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;
});
我应该收到警报消息,但我不能。我做错了什么?
最佳答案
哇,有很多冒泡事件...
您不断返回 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();
});
关于jquery - 为什么我无法触发提交按钮最接近的表单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17633381/