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

Следующий код находится во включенном файле 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() работать.

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

1
leonel 28 Авг 2011 в 04:50

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);
    });
}
1
ShankarSangoli 28 Авг 2011 в 05:37

Вы можете использовать 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, когда вы Закончив редактирование.

2
mu is too short 28 Авг 2011 в 01:00