更新:根据您在下面的评论,您希望看到哪个提交按钮触发了提交。您无法使用表单的 submit 事件来执行此操作,但您可以使用提交按钮上的 click 事件:
$(this).find("input[type=submit]").click(function() {
var bypass = $(this).hasClass("bypass");
});
提交按钮的click 事件发生在表单的submit 事件之前,因此您可以使用它来设置一个标志,然后在表单的提交处理程序中使用该标志。标志可以在 JavaScript 代码中的某处、表单上的隐藏字段、添加到表单元素的属性等。
以下关于target 与this 的信息可能不再与您的问题直接相关,但我将离开它,因为需要了解target 与this 的人可能会找到您的问题,所以它可能对他们有用。
event.target 是实际发生事件的元素。对于冒泡事件,这可能是您附加了处理程序的元素的后代:
$(this).bind("submit", function(event) {
var target = event.target;
});
this 是您设置事件处理程序的元素(这是ensured by jQuery):
$(this).bind("submit", function(event) {
// `this` is the element you hooked the event on
});
由于您使用submit 事件并直接挂钩表单,我希望target 和this 是相同的。
三个例子(两个关于形式,一个只是一般性)
1.A.表单提交和 JavaScript 变量的示例 (live version):
这是一个使用表单提交的示例,区分target 和this,并显示连接提交按钮的点击事件,以便我们知道它们是否具有“绕过”类。这在 JavaScript 代码中使用了一个标志:
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Target Example</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<form id='theForm' action='#'>
<input type='submit' value='Send 1' class='bypass'>
<input type='submit' value='Send 2'>
</form>
<hr>
</body>
<script type='text/javascript'>
jQuery(function($) {
var form, bypass;
// Our bypass flag
bypass = false;
// Get the form
form = $('#theForm');
// Hook up click handlers on the submit buttons
// to update the bypass flag.
form.find('input[type=submit]').click(function() {
bypass = $(this).hasClass('bypass');
});
// Hook up a form submission handler
form.submit(function(event) {
// Either do validation or don't, as appropriate
display("event.target.tagName = " + event.target.tagName +
", this.tagName = " + this.tagName +
", bypass = " + bypass);
// Best to reset the flag here in case submission is
// cancelled and then the form is re-submitted using
// something other than a submit button (the user
// pressing Enter in a text field, or you calling the
// submit function)
bypass = false;
// Just returning false in this example
return false;
});
function display(msg) {
$("<p>" + msg + "</p>").appendTo(document.body);
}
});
</script>
</html>
1.B.表单提交和属性示例 (live version):
这与上面的示例相同,但在 JavaScript 代码中使用属性而不是标志:
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Target Example</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<form id='theForm' action='#'>
<input type='submit' value='Send 1' class='bypass'>
<input type='submit' value='Send 2'>
</form>
<hr>
</body>
<script type='text/javascript'>
jQuery(function($) {
var form;
// Get the form
form = $('#theForm');
// Default to no bypass
form.attr("data-bypass", "N");
// Hook up click handlers on the submit buttons
// to update the bypass flag.
form.find('input[type=submit]').click(function() {
$(this.form).attr("bypass",
$(this).hasClass('bypass') ? "Y" : "N");
});
// Hook up a form submission handler
form.submit(function(event) {
var form = $(this);
// Either do validation or don't, as appropriate
display("event.target.tagName = " + event.target.tagName +
", this.tagName = " + this.tagName +
", bypass = " + form.attr("bypass"));
// Best to reset the flag here in case submission is
// cancelled and then the form is re-submitted using
// something other than a submit button (the user
// pressing Enter in a text field, or you calling the
// submit function)
form.attr("bypass", "N");
// Just returning false in this example
return false;
});
// We're done with the `form` jQuery obj, release it
form = undefined;
function display(msg) {
$("<p>" + msg + "</p>").appendTo(document.body);
}
});
</script>
</html>
2。 target 和 this (live version) 之间的差异示例:
此示例不再与您的问题相关,但我将其留给需要target 与this 示例的任何人。
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Target Example</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<p id="one">I'm one, and <strong>this is a child element</strong></p>
<p id="two">I'm two, and <strong><em>this is two children deep</em></strong></p>
<p id="three">I'm three, there are no child elements here</p>
<hr>
</body>
<script type='text/javascript'>
jQuery(function($) {
$('p').click(function(event) {
display("event.target.tagName = " + event.target.tagName +
", this.tagName = " + this.tagName);
});
function display(msg) {
$("<p>" + msg + "</p>").appendTo(document.body);
}
});
</script>
</html>