jQuery：在绑定到表单提交事件时查找点击的元素？ [英] jQuery: Find clicked element when binding to a form submission event?
问题描述
$ someForm.live（'submit'，function（event）{
//做某事
}）;
如果有多个提交按钮（< button type =提交> ），我想参考点击的按钮的名称属性，我该怎么做在回调函数中？
更新 - 澄清
在回调上下文中，这个和 event.target 是指表单本身，事件是一个深层嵌套目的。它可能包含我正在寻找的东西，但我还没有找到。
另一种方式来说明这个问题是如果我在看在表单上提交事件（而不是其子元素），当我处理该事件时，是否有任何方式来确定事件冒泡到表单的子元素？点击的元素在这一点上甚至可以使用，还是浏览器只是把它看作是一个没有更深层次的表单本身的事件？
更新2 - 答案
看来，答案是Nick Craver所说的 - 提交事件源于表单本身，所以它不能追溯到具有点击事件的按钮，而不是提交事件。为了从点击获得更多信息，有必要为按钮设置点击监听器。
在某些情况下（如我的），您可能需要同时1）捕获哪个提交按钮被点击，2）绑定到表单上的submit事件。例如，如果您使用jQuery Validate，则会在表单有效之前提交表单。如果您通过绑定到按钮点击，通过ajax提交表单，您将绕过该验证。
如Nick所示，您可以通过捕获按钮信息来解决此问题使用按钮的点击监听器，然后在表单的提交回调中使用此信息。
将按钮的信息从点击回调传递到表单的提交的干净方式回调是使用 jQuery.data（）将其存储在表单上。例如：
//在按钮的点击事件回调中...
jQuery.data（$ someForm， lastSubmitButton'，event.target.name）;
//在表单的提交事件回调中...
var whichButton = jQuery.data（$ someForm，'lastSubmitButton'）;
这样可以避免需要一个全局变量。
通常可以使用 event.target 元素本身...在这种情况下，由于它是一个本机DOM属性，只需使用 .name 还有：
$ someForm.live（'submit'，function（event）{
var name = event.target.name;
}）;
但是，由于提交不起源从按钮，只需一个点击，你希望更像这样的事情：
$（form：submit）。live（'click'，function（event）{
var name = this.name;
}）;
这里使用这个，因为@一个href =https://stackoverflow.com/users/113716/patrick-dw> patrick 指出，一个< button> 可以有孩子在这些情况下，目标也许是一个孩子。
I think this should be simple. Say I've got the following jQuery:
$someForm.live('submit', function(event) {
// do something
});
If there is more than one submit button (<button type="submit">) in that form, and I want to refer to the nameattribute of the button that was clicked, how would I do that within the callback function?
Update - Clarification
In the callback context, both this and event.target refer to the form itself, and event is a deeply nested object. It may contain what I'm looking for, but I haven't found it yet.
Another way to phrase this question would be, "if I'm watching for a submit event on a form (not its child elements), is there any way, when I handle that event, to determine the child element from which the event bubbled up to the form?" Is the clicked element even available at that point, or does the browser just consider it an event on the form itself that had no deeper origin?
Update 2 - Answer
It appears that the answer is what Nick Craver said - that the submit event originates at the form itself, so it can't be traced back to the button, which had a click event, not a submit event. In order to get any further information from the click, it's necessary to have a click listener for the button.
In some cases (like mine), you may need both 1) to capture which submit button is clicked and 2) to bind to the submit event on the form. For example, if you're using jQuery Validate, it prevents the form from submitting until it's valid. If you make the form submit via ajax by binding to the button click, you'll bypass that validation.
As Nick showed, you can solve this by capturing the button info using a click listener for the buttons, and then use this information in the form's submission callback.
A clean way to pass the button's info from the click callback to the form's submission callback is to use jQuery.data() to store the it on the form. For example:
// In the button's click event callback...
jQuery.data($someForm, 'lastSubmitButton', event.target.name);
// In the form's submit event callback...
var whichButton = jQuery.data($someForm, 'lastSubmitButton');
This prevents the need for a global variable.
Normally you can use event.target for the element itself...and in this case, since it's a native DOM property, just use .name as well:
$someForm.live('submit', function(event) {
var name = event.target.name;
});
However, since submit doesn't originate from the button, only a click does, you want something more like this:
$("form :submit").live('click', function(event) {
var name = this.name;
});
Use this here, because as @patrick points out, a <button> can have children as well, and the target may be a child in those cases.
这篇关于jQuery：在绑定到表单提交事件时查找点击的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
