admin管理员组

文章数量:1290960

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 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.originalEvent.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

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 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.originalEvent.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

  • javascript
  • jquery
  • binding
Share Improve this question edited Sep 23, 2010 at 22:14 Mike asked Sep 23, 2010 at 6:56 MikeMike 211 silver badge3 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 10

Update: Per your ment 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./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./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./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./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./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./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>​​​​​​​​​​​

本文标签： javascriptjquery bind submit eventfind callerStack Overflow

版权声明：本文标题：javascript - jquery bind submit event - find caller - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741513145a2382725.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。