我如何才能找到绑定(bind)事件的调用者/发送者。
$(this).bind("submit", function(caller) { ... });
我发现我可以使用“caller.originalEvent.explicitOriginalTarget”,但这仅适用于 Firefox。
编辑:
我正在使用position-relative.net中的jquery验证库,我想这样做,以便如果按钮在发送者上有一个名为“bypass”的类,那么验证引擎只会返回true,以便表单可以被提交。 IE。我使用的是 ASP.NET,所有按钮按下都是回发(表单提交)。我只是想制作一个后退按钮。
我添加了这段代码
if ((caller.originalEvent.explicitOriginalTarget != null) && (caller.originalEvent.explicitOriginalTarget.className == "bypass")) {
return true;
}
在第 71 行,就在该行下方
$(this).bind("submit", function(caller) { // ON FORM SUBMIT, CONTROL AJAX FUNCTION IF SPECIFIED ON DOCUMENT READY
感谢想法和建议。
谢谢
最佳答案
更新:根据您下面的评论,您希望了解哪个提交按钮触发了提交。您无法使用表单的 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
事件并直接 Hook 表单,因此我希望 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>
关于javascript - jquery 绑定(bind)提交事件 - 查找调用者,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3776033/