Question

我认为这应该很简单。说我有以下jQuery：

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

如果该表单中有多个提交按钮（<button type="submit">），并且我想引用所单击按钮的name属性，我该如何在回调中执行此操作功能

更新 - 澄清

在回调上下文中，this和event.target都引用表单本身，event是一个深层嵌套的对象。它可能包含我正在寻找的东西，但我还没有找到它。

另一种表达这个问题的方法是，“如果我正在观看表单上的提交事件（而不是其子元素），那么当我处理该事件时，有什么方法可以确定子元素事件冒泡到表格？“ 此时点击的元素是否可用，或者浏览器是否仅将其视为表单上没有更深层原因的事件？

更新2 - 回答

似乎答案是Nick Craver所说的 - 提交事件源自表单本身，因此无法追溯到具有点击事件而非提交事件的按钮。 为了从点击中获取任何进一步的信息，必须有一个按钮的点击监听器。

在某些情况下（比如我的），您可能需要1）捕获单击的提交按钮和2）绑定到表单上的提交事件。例如，如果您正在使用jQuery Validate，它会阻止表单提交，直到它有效。如果您通过绑定到按钮单击来通过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作为元素本身......在这种情况下，因为它是一个本机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指出，<button>也可以有孩子，在这些情况下目标可能是孩子。

Answer 2

您可以使用event对象的target属性来获取启动事件的元素：

$(":submit").click(function(event) {
    var initiatingElement = event.target;
    // Do something with `initiatingElement`...
});

编辑：请注意，为了实现这一目标，您必须处理提交按钮的click事件，而不是表单的submit事件。< / p>

jQuery：绑定到表单提交事件时查找被点击的元素？

更新 - 澄清

更新2 - 回答

2 个答案: