Событие клика более одного раза, но отменять привязку после каждого клика

Question

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

Следующий код находится во включенном файле JavaScript.У меня есть функция, которая делает строки таблицы редактируемыми.

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

и готовые события ...

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

Что я пробовал:

1. Поместите код между $(document).ready(function() { });, но он работает только при первом щелчке и первом редактировании.Но потом, если я попытаюсь сделать это снова, это просто не сработает.

2. Просто поместите код отдельно во включенный файл без $(document).ready(function(){ });.Затем используйте onclick события на tr.Проблема:

   1. JavaScript навязчив.
   2. Если я нажимаю на одну и ту же строку более одного раза, она продолжает вызывать событие несколько раз;и если я щелкаю в разных строках, все они одновременно переходят в режим редактирования.

Я знаю, что это просто вопрос наличия постоянного прослушивателя событий и использования unbind,Я пытался использовать .live(), который работал хорошо, но потом я не смог заставить .die() работать.

Не могли бы вы дать мне несколько советов?

Answer 1

Вы можете использовать one вместо click:

$('.editable_title').one('click', function() { editRow(this.parentNode); });

А затем снова используйте one только на .editable_title для строки, которую вы отредактировали после завершения редактирования.

Или вы можете использовать флаг:

$('.editable_title').click(function() {
    var $p = $(this).parent();
    if($p.data('editing'))
        return;
    $p.data('editing', true);
    editRow($p[0]);
});

А затем выполните $x.removeData('editing') для соответствующего $x, когда закончите редактирование.

Answer 2

Попробуйте это

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