jquery绑定提交事件 - 查找调用者

时间:2010-09-23 06:56:10

标签: 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

赞赏的想法和建议。

由于

1 个答案:

答案 0 :(得分:10)

更新:根据您的评论,您希望看到哪个提交按钮触发了提交。您不能使用表单submit事件执行此操作 - 但您可以在提交按钮上使用click事件:

$(this).find("input[type=submit]").click(function() {
    var bypass = $(this).hasClass("bypass");
});

提交按钮的click事件发生在表单的submit事件之前,因此您可以使用它来设置标志,然后在表单的提交处理程序中使用该标志。标志可以在某处的JavaScript代码中,表单上的隐藏字段,您添加到表单元素的属性等。

以下有关targetthis的信息可能不再与您的问题直接相关,但我将其离开,因为需要了解target与{{{{ 1}}可能会找到你的问题,所以它可能对他们有用。

this 是事件实际发生的元素。对于冒泡事件,这可能是您附加处理程序的元素的后代:

event.target

$(this).bind("submit", function(event) { var target = event.target; }); 是您设置事件处理程序的元素(这是ensured by jQuery):

this

由于您正在使用$(this).bind("submit", function(event) { // `this` is the element you hooked the event on }); 事件并直接挂接表单,因此我希望submittarget保持一致。

三个例子(两个关于表单,一个只是一般)

<强> 1.A。表单提交和JavaScript变量的示例(live version):

以下是使用表单提交的示例,区分thistarget,并显示连接提交按钮的点击事件,以便我们知道他们是否有“绕过”类。这在JavaScript代码中使用了一个标志:

this

<强> 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, 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>

<强> 2。 <!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> targetlive version)之间存在差异的示例:

此示例与您的问题不再相关,但我将其留给任何需要thistarget示例的人。

this