Question

I have a html page with multiple similar elements which can be edited in-place:

The Title
Some description
Count 10
[Edit]

Another Title
Another description
Count 54
[Edit]

...

If the edit button is clicked the text is replaced with a form via Ajax (the rest of the page won’t be reloaded):

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

Another Title
Another description
Count 54
[Edit]

...

The event handlers to replace the text with a form and to submit the form are almost identical for all items. My first approach was to use IDs in the html tags and bind the jQuery event handler to this ID. But hat leads to repetitive code. So the obvious idea is to not repeat similar code for each item.

How can I distinguish the items in the event handler so that the right item is replaced with a form and that the right form is submitted?

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
});