JQuery: найти элемент с щелчком при привязке к событию отправки формы?
Я думаю, это должно быть просто. Скажем, у меня есть следующий jQuery:
$someForm.live('submit', function(event) {
// do something
});
Если в этой форме имеется более одной кнопки отправки (<button type="submit">
), и я хочу обратиться к атрибуту name
нажатой кнопки, как бы это сделать в функции обратного вызова?
Обновление - уточнение
В контексте обратного вызова оба this
и event.target
относятся к самой форме, а event
- глубоко вложенный объект. Он может содержать то, что я ищу, но я еще не нашел его.
Другим способом выражения этого вопроса было бы: "Если я смотрю на событие отправки в форме (а не на его дочерние элементы), есть ли способ, когда я обрабатываю это событие, определить дочерний элемент, из которого событие разбудилось до формы?" Является ли элемент с кликом даже доступным в этой точке, или браузер просто рассматривает это событие в самой форме, которая не имеет более глубокого происхождения?
Обновление 2 - Ответ
Похоже, что ответ - это то, что сказал Nick Craver, - что событие отправки происходит в самой форме, поэтому его нельзя отследить на кнопке с событием клика, а не событием отправки. Чтобы получить дополнительную информацию от клика, необходимо, чтобы кнопка нажала кнопку.
В некоторых случаях (например, у меня) вам может понадобиться как: 1) захватить кнопку отправки и нажать кнопку 2) для привязки к событию отправки в форме. Например, если вы используете jQuery Validate, это предотвращает отправку формы до ее действительности. Если вы передадите форму через ajax, привязав ее к нажатию кнопки, вы обойдете эту проверку.
Как показал Ник, вы можете решить эту проблему, запустив информацию о кнопке с помощью кнопки для прослушивания кнопок, а затем используйте эту информацию в обратном вызове отправки формы.
Чистый способ передать информацию о кнопке из обратного вызова клика на обратный вызов представления формы - использовать jQuery.data()
, чтобы сохранить его в форме. Например:
// In the button click event callback...
jQuery.data($someForm, 'lastSubmitButton', event.target.name);
// In the form submit event callback...
var whichButton = jQuery.data($someForm, 'lastSubmitButton');
Это предотвращает необходимость глобальной переменной.
Ответы
Ответ 1
Обычно вы можете использовать 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, <button>
может иметь детей, а цель может быть дочерней в эти случаи.
Ответ 2
Вы можете использовать свойство target объекта event
, чтобы получить элемент, инициировавший событие:
$(":submit").click(function(event) {
var initiatingElement = event.target;
// Do something with `initiatingElement`...
});
EDIT: Обратите внимание, что для этого вам придется обрабатывать события click
ваших кнопок отправки вместо события submit
вашей формы.