jQuery:在绑定到表单提交事件时查找点击的元素?

前端之家收集整理的这篇文章主要介绍了jQuery:在绑定到表单提交事件时查找点击的元素?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我认为这应该很简单.说我有以下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>也可以有孩子,在这些情况下,目标可能是一个孩子.

猜你在找的jQuery相关文章