javascript - jquery 绑定(bind)提交事件 - 查找调用者

标签 javascript jquery binding

我如何才能找到绑定(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 代码中的某处、表单上的隐藏字段、添加到表单元素的属性等。

以下有关 targetthis 的信息可能不再与您的问题直接相关,但我将其保留,因为需要了解 的人targetthis 可能会找到您的问题,因此可能对他们有用。

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 表单,因此我希望 targetthis 是相同的。

三个示例(两个有关表单,一个只是一般性的)

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

这是一个使用表单提交的示例,区分 targetthis,并显示连接提交按钮的点击事件,以便我们知道它们是否具有类“旁路”。这在 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。 targetthis 之间的差异示例 ( live version ):

此示例不再与您的问题相关,但我将其保留在适当的位置,以供需要 targetthis 示例的任何人使用。

<!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/

相关文章:

javascript - three.js 定向光影

javascript - 将变量作为全局变量存储在 ajax 响应中并用于发送其他 ajax 请求?

xaml - Windows Phone : RelativeSource Mode=FindAncestor, AncestorType:无法解析符号 AncestorType

c++ - 使用从字符串中提取的参数调用函数

ios - 在 View Controller 中绑定(bind)元组或字符串以使用 RXSwift 查看模型

javascript - Three.js + Threex + Javascript : "fromArray is not a function"?

javascript - 我克隆的元素,功能不起作用,包含在克隆的元素中

javascript - javascript 中的日期未定义

javascript - 使用输入搜索 json

jquery - Fancybox - 在链接中声明大小