我认为这应该很简单.说我有以下jQuery:
$someForm.live('submit',function(event) { // do something });
如果该表单中有多个提交按钮(< button type =“submit”>),并且我想引用被点击的按钮的名称属性,那么我如何在回调函数中这样做?
更新 – 澄清
在回调上下文中,this和event.target都指的是表单本身,事件是一个深层嵌套的对象.它可能包含我正在寻找,但我还没有找到它.
说出这个问题的另一种方法是:“如果我正在一个表单上(而不是其子元素)注册一个提交事件,那么当我处理该事件时,是否有任何方式来确定事件冒泡的子元素直到形式?“点击的元素是否在这一点上甚至可用,或者浏览器是否将其视为没有更深层次的表单本身的事件?
更新2 – 答案
看来,答案是Nick Craver所说的 – 提交事件是以自己的形式出现的,所以它不能追溯到具有点击事件而不是提交事件的按钮.为了从点击获得任何进一步的信息,有必要有按钮的点击监听器.
在某些情况下(如我的),您可能需要同时1)捕获哪个提交按钮被点击,2)绑定到表单上的submit事件.例如,如果您使用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');
这样就不需要一个全局变量.
解决方法
通常,您可以使用
event.target
作为元素本身…在这种情况下,由于它是一个本机DOM属性,所以只需使用.name:
$someForm.live('submit',function(event) { var name = event.target.name; });
但是,由于提交不是源自按钮,只能点击,你想要something more like this:
$("form :submit").live('click',function(event) { var name = this.name; });
在这里使用,因为在@ patrick指出,< button>也可以有孩子,在这些情况下,目标可能是一个孩子.