jQuery: найти элемент, на который нажали, при привязке к событию отправки формы? - PullRequest
Новая
       1

jQuery: найти элемент, на который нажали, при привязке к событию отправки формы?

14 голосов
/ 13 декабря 2010

Я думаю, это должно быть просто.Скажем, у меня есть следующий jQuery: 

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

Если в этой форме более одной кнопки отправки (<button type="submit">), и я хочу сослаться на атрибут name кнопки, котораябыл нажат, как мне сделать это в функции обратного вызова?

Обновление - Уточнение

В контексте обратного вызова и this, и event.target относятся к самой форме, а event глубоко вложенный объект.Он может содержать то, что я ищу, но я еще не нашел его.

Еще один способ сформулировать этот вопрос: «если я наблюдаю за событием отправки в форме (недочерние элементы), есть ли способ, когда я обрабатываю это событие, определить дочерний элемент, из которого событие всплыло в форме? " Является ли выбранный элемент даже доступным в этой точке, или браузер просто считает его событием в самой форме, которое не имеет более глубокого происхождения?

Обновление 2 - Ответ

Похоже, что ответ на этот вопрос сказал Ник Крейвер - событие отправки происходит из самой формы, поэтому его нельзя отследить до кнопки, у которой было событие щелчка, а не событие отправки. Чтобы получить дополнительную информацию о щелчке, необходимо иметь прослушиватель щелчков для кнопки.

В некоторых случаях (например, у меня) вам могут потребоваться оба: 1) для захвата нажатия кнопки отправкии 2) привязать к событию отправки в форме.Например, если вы используете jQuery Validate, он запрещает отправку формы до тех пор, пока она не станет действительной.Если вы отправите форму через ajax, связавшись с нажатием кнопки, вы обойдете эту проверку.

Как показал Ник, вы можете решить эту проблему путем сбора информации о кнопке с помощью прослушивателя щелчка для кнопок изатем используйте эту информацию в обратном вызове для отправки формы.

Чтобы передать информацию о кнопке от обратного вызова click в обратный вызов для отправки формы, используйте 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');

Это предотвращает необходимость использования глобальной переменной.

Ответы [ 2 ]

8 голосов
/ 13 декабря 2010

Обычно вы можете использовать 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> также могут быть дети, и в этих случаях целью может быть ребенок.

1 голос
/ 13 декабря 2010

Вы можете использовать свойство target объекта event, чтобы получить элемент, инициировавший событие: 

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

EDIT: Обратите внимание, что,чтобы это работало, вам нужно обработать click события ваших кнопок отправки вместо submit события вашей формы.

...