【问题标题】:jquery bind submit event - find callerjquery绑定提交事件 - 查找调用者
【发布时间】:2010-09-23 06:56:10
【问题描述】:

我如何能够找出绑定事件的调用者/发送者。

$(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

感谢您的想法和建议。

谢谢

【问题讨论】:

    标签: javascript jquery binding


    【解决方案1】:

    更新:根据您在下面的评论,您希望看到哪个提交按钮触发了提交。您无法使用表单的 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 事件并直接挂钩表单,我希望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>​​​​​​​​​​​
    

    【讨论】:

    • 我好像没有那个会员。这些是我看到的所有可用成员。 img836.imageshack.us/img836/2240/clipboard02kq.jpg
    • @Mike:这很奇怪,如果你使用 jQuery,你应该拥有它。 jQuery 为您规范化事件对象。我已经在 Windows 上的 IE6 和 IE8 以及 Linux 上的 Chrome、Opera 和 Firefox 上测试了上述内容。一切都好。如果您发布更多代码,我们可能会帮助您找出问题所在。
    • 我正在使用 jQuery,带有来自 position-relative.net 的验证引擎我正在尝试修改 jquery.validationEngine.js 以便如果按钮上有一个“绕过”类,验证引擎将在表单上返回 true 以允许它回发。
    • target 似乎是实际的表单本身。还是找不到发件人:-(
    • 非常感谢。你的答案是我见过的关于堆栈溢出的最好的。非常感谢您的帮助。正是这样的帮助使编程社区蓬勃发展。周末我学到了很多关于 jQuery 和 html 表单的知识,这是你回答的结果!先生,您是传奇人物!
    猜你喜欢
    • 2016-08-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-04-22
    • 1970-01-01
    • 2014-05-12
    • 2014-02-21
    相关资源
    最近更新 更多