Mik*_*ike 2 javascript jquery binding
我怎样才能找到绑定事件的调用者/发送者.
$(this).bind("submit", function(caller) { ... });
我发现我可以使用"caller.originalEvent.explicitOriginalTarget",但这只适用于firefox.
编辑:
我正在使用来自position-relative.net的jquery验证库我希望这样做,以便如果一个按钮在发送者上有一个名为"bypass"的类,这使得验证引擎只返回true,因此可以提交表单.即我正在使用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
意见和建议表示赞赏.
谢谢
T.J*_*der 10
更新:根据您的评论,您正在查看哪个提交按钮触发了提交.您无法使用表单的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是您设置事件处理程序的元素(这由jQuery确保):
$(this).bind("submit", function(event) {
// `this` is the element you hooked the event on
});
由于你正在使用一个submit事件并直接挂钩表格,我希望target并且this是相同的.
三个例子(两个关于形式,一个只是一般)
1.A. 表单提交和JavaScript变量(实时版本)的示例:
这是一个使用表单提交,区分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. 表单提交和属性(实时版本)的示例:
这与上面的示例相同,但在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(实时版)之间有区别的示例:
这个例子是不再适用于你的问题,但我把它留在地方,任何人都需要的一个例子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>???????????
| 归档时间： |
|
| 查看次数： |
6793 次 |
| 最近记录： |