Привязка обработчика событий jQuery к множеству похожих форм

Question

У меня есть HTML-страница с несколькими похожими элементами, которые можно редактировать на месте:

The Title
Some description
Count 10
[Edit]

Another Title
Another description
Count 54
[Edit]

...

При нажатии кнопки редактирования текст заменяется на форму через Ajax (остальная часть страницы не будет перезагружена):

Title:       [The Title       ]
Description: [Some description]
Count:       [10]
[Save] [Cancel]

Another Title
Another description
Count 54
[Edit]

...

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

Как отличить элементы в обработчике событий, чтобы заменить нужный элемент на форму и отправить правильную форму?

Answer 1

$('.classYouPutOnAllEditButtons').click(function () {
    var that = $(this); // this variable now holds a reference to the Edit button that was clicked, you can use a traversal method (e.g. closest()) to find the form it was in
    // do your other stuff
});

Answer 2

Внутри вашего обработчика событий, this относится к конкретному элементу, по которому щелкнули.

$(yourSelector).bind('event', function () {
    // in here, `this` will be the Edit button.
});