Блог

У меня есть 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 к этому идентификатору. Но это приводит к повторяющемуся коду. Итак, очевидная идея состоит в том, чтобы не повторять аналогичный код для каждого элемента.

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

 $('.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
});
  

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

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