Question

What I want to do: Every time I click a table row it goes into edit mode. When I click another row, the row I clicked previously exits edit mode and the one I just clicked goes into edit mode.

The following code is in an included JavaScript file. I have a function that makes table rows editable.

function editRow(row) {
    /* awesome code here */
}

and have the events ready…

$(".editable_title").click(function() {
    editRow(this.parentNode);
});`

What I have tried:

1. Put the code in between $(document).ready(function() { }); but it only works with the first click and the first edit submission. But then, if I try to do it again, it just doesn’t work.

2. Just put the code by itself in the included file without the $(document).ready(function(){ });. Then use onclick events on the tr’s. Problem:

   1. The JavaScript is intrusive.
   2. If I click on the same row more than once, it keeps on triggering the event multiple times; and if I click in different rows, all of them go into edit mode at the same time.

I know it’s just a matter of having an constant event listener and using unbind. I tried using .live() which worked well but then I couldn’t get .die() to work.

Can you please give me some suggestions?

Answer 1

Try this

$(".editable_title").one(function() {
    editRow(this);
});

function editRow(row) {
    var rowNode = row.parentNode;
    /* awesome code here */


    //Attach the click event here again after editing is done
    //If you are doing any ajax calls then this should be done in the success callback
    $(row).one(function() {
       editRow(this);
    });
}