jQuery:绑定到表单提交事件时查找被点击的元素?
我认为这应该很简单。 说我有以下jQuery:
$someForm.live('submit', function(event) { // do something });
如果该表单中有多个提交按钮( ),并且我想引用所单击按钮的
name
属性,我将如何在回调函数中执行此操作?
更新 – 澄清
在回调上下文中, this
和event.target
引用表单本身,而event
是一个深度嵌套的对象。 它可能包含我正在寻找的东西,但我还没有找到它。
另一种表达这个问题的方法是,“如果我正在观看表单上的提交事件(而不是其子元素),那么当我处理该事件时,有什么方法可以确定事件冒泡的子元素到forms?“ 点击的元素在这一点上是否可用,或者浏览器是否只是将其视为表单本身没有更深层来源的事件?
更新2 – 答案
似乎答案是Nick Craver所说的 – 提交事件源自表单本身,因此无法追溯到具有点击事件而非提交事件的按钮。 为了从点击中获取任何进一步的信息,必须有一个按钮的点击监听器。
在某些情况下(如我的),您可能需要1)捕获单击的提交按钮和2)绑定到表单上的提交事件。 例如,如果您正在使用jQuery Validate,它会阻止表单提交,直到它有效。 如果您通过绑定到按钮单击通过ajax提交表单,您将绕过该validation。
正如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');
这可以防止需要全局变量。
通常,您可以将event.target
用于元素本身…在这种情况下,因为它是本机DOM属性,所以也可以使用.name
:
$someForm.live('submit', function(event) { var name = event.target.name; });
但是,由于submit
不是来自按钮,只需点击一下,您需要更像这样的内容 :
$("form :submit").live('click', function(event) { var name = this.name; });
在这里使用this
,因为正如@ patrick指出的那样, 也可以有孩子,并且在这些情况下目标可能是孩子。
您可以使用event
对象的target属性来获取启动事件的元素:
$(":submit").click(function(event) { var initiatingElement = event.target; // Do something with `initiatingElement`... });
编辑:请注意,要使其正常工作,您必须处理提交按钮的click
事件,而不是表单的submit
事件。