jquery bind submit event - find caller_问答_开发者

How would I be able to find out the caller/sender of an event on binding.

$(this).bind("submit", function(caller) { ... });

I found out that I could use "caller.originalEvent.explicitOriginalTarget", but this only works in firefox.

EDIT:

I'm using the jquery validation library from position-relative.net I want to make it so that if a button has a class called "bypass" on the sender, that makes the validation engine just return true so the form can be submitted. I.e. I'm using ASP.NET, and all button presses are postbacks (form submits). I'm just looking to make a back button.

I've added this code

if ((caller.orig开发者_如何学CinalEvent.explicitOriginalTarget != null) && (caller.originalEvent.explicitOriginalTarget.className == "bypass")) {
            return true; 
        }

on line 71, just under this line

$(this).bind("submit", function(caller) {   // ON FORM SUBMIT, CONTROL AJAX FUNCTION IF SPECIFIED ON DOCUMENT READY

Thoughts and suggestions appreciated.

Thanks

Update: Per your comment below, you're looking to see which submit button triggered the submission. You can't do that with the form's submit event — but you can with the click event on your submit buttons:

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

The submit button's click event happens before the form's submit event, so you can use that to set a flag, and then use that flag in the form's submit handler. The flag can be in JavaScript code somewhere, a hidden field on the form, an attribute you add to the form element, etc.

The following information about target vs. this is probably no longer directly relevant to your question, but I'm leaving it because people who need to understand target vs. this will probably find your question, so it may be useful to them.

event.target is the element on which the event actually occurred. For bubbling events, this may be a descendant of the element on which you've attached a handler:

$(this).bind("submit", function(event) {
    var target = event.target;
});

this is the element on which you set the event handler (this is ensured by jQuery):

$(this).bind("submit", function(event) {
    // `this` is the element you hooked the event on
});

Since you're using a submit event and hooking the form directly, I'd expect target and this to be the same.

Three examples (two regarding forms, one just general)

1.A. Example with form submit and JavaScript variable (live version):

Here's an example that uses form submit, differentiates between target and this, and shows hooking up the submit buttons' click events so we know whether they have the class "bypass". This uses a flag in the JavaScript code:

<!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. Example with form submit and attribute (live version):

This is the same example as the above, but using an attribute instead of a flag in the JavaScript code:

<!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. Example with a difference between target and this (live version):

This example is no longer relevant to your question, but I'm leaving it in place for anyone needing an example of target vs. 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>