jquery - 绑定(bind)到表单提交事件时查找单击的元素？

Question

我认为这应该很简单。假设我有以下 jQuery:

$someForm.live('submit', function(event) {
// do something
});

如果该表单中有多个提交按钮(<button type="submit">)，并且我想引用name 被单击的按钮的属性，我该如何在回调函数中执行此操作？

更新 - 说明

在回调上下文中，this和event.target请参阅表格本身，以及 event是一个深度嵌套的对象。它可能包含我正在寻找的内容，但我还没有找到。

表达这个问题的另一种方式是，“如果我正在观察表单上的提交事件(而不是其子元素)，当我处理该事件时，是否有任何方法可以确定其中的子元素事件冒泡到表单中吗？” 此时单击的元素是否可用，或者浏览器是否仅将其视为表单本身上的事件，而没有更深层次的起源？

更新 2 - 答案

看来答案就是 Nick Craver 所说的 - 提交事件源自表单本身，因此无法追溯到按钮，该按钮具有单击事件，而不是提交事件。 为了从点击中获取更多信息，按钮需要有一个点击监听器。

在某些情况下(例如我的)，您可能需要 1) 捕获单击了哪个提交按钮，以及 2) 绑定(bind)到表单上的提交事件。例如，如果您使用 jQuery Validate，它会阻止表单提交，直至其有效。如果您通过绑定(bind)到按钮点击来通过 ajax 提交表单，您将绕过该验证。

正如 Nick 所示，您可以通过使用按钮的单击监听器捕获按钮信息来解决此问题，然后在表单的提交回调中使用此信息。

将按钮信息从单击回调传递到表单提交回调的一种简洁方法是使用 jQuery.data()将其存储在表单上。例如:

// 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');

这避免了对全局变量的需要。

Answer 1

通常您可以使用 event.target 对于元素本身...在本例中，由于它是 native DOM 属性，因此只需使用 .name还有:

$someForm.live('submit', function(event) {
  var name = event.target.name;
});

但是，自从 submit不是源自按钮，只需单击即可，您想要 something more like this :

$("form :submit").live('click', function(event) {
  var name = this.name;
});

使用this在这里，因为作为@ patrick指出，a <button>也可以有 child ，在这种情况下目标可能是 child 。