jQuery - вставить форму в DOM, затем связать события, затем вернуться в предыдущее состояние

Question

Я пытаюсь создать редактируемую таблицу для турнира, используя jQuery и ajax.

Текущая структура таблицы выглядит следующим образом:

<table>
<tr id="result-243">
<td class="name">Somebody</td>
<td class="score_1">9.0</td>
<td class="score_2">7.0</td>
<td class="score_3">7.8</td>
<td class="score_4">9.9</td>
<td class="score_5">7.9</td>
<td class="edit-243"><div id="edit-243" class="edit">Edit</div></td>
</tr>
</table>

Мне нужно вставить форму, когда нажата ссылка «Изменить».Эта форма будет заполнена значениями из текущей записи.Я могу сделать эту работу следующим образом:

$('.edit').click(function() {
        result_id = $(this).attr('id').match(/[0-9]+/);
        sel = '#result-' + result_id;
        $.get(
            myScript.ajax_url, 
            {
                action:'getResults',
                id:result_id,
                nonce: myScript.nonce
            },
            function( response ) 
            {
                form = "<form id='save-" + result_id"' class='post-me'>";
                for(value in response) {
                    form += "<input type='text' name = '" + value + "' value = '" + response[value] + "' />";
                }
                form += "<input type='submit' id='save-this' name='save' value='Save' /></form>";
                $(sel).html(form);
            }
            );
    });;

Я, очевидно, ожидал, что смогу связать форму с запросом $ .post (), и это должно опубликовать данные.Однако проблема, с которой я, похоже, сталкиваюсь, заключается в следующем:

Если я хочу восстановить предыдущие элементы таблицы (как указано выше) с новыми значениями, я не могу снова нажать «Изменить».Я думаю, это потому, что jQuery будет связывать события с элементами DOM, вставленными на лету, но только один раз.Я не могу удалить элементы, не потеряв привязку к событию.

Есть идеи, что не так с моим подходом к дизайну?

Answer 1

Можете ли вы использовать ContentEditable вместо этого (html5)?Затем вы можете просто свернуть отредактированную таблицу и отправить новые значения, как только они будут изменены.

http://jsfiddle.net/5Ut8x/

<table contenteditable>

Тестирование для поддержки ContentEditable .

Подумайте еще раз над своим вопросом и своей существующей структурой - я думаю, что вы можете обойти проблему привязки событий, используя on или не уничтожая старые значения, пока форма фактически не будет отправлена.Просто скройте строку таблицы и замените ее на форму.

Тогда, если форма действительно отправлена, уничтожьте старую строку.Если пользователь отменяет отправку, уничтожьте форму и перезапустите старую строку.Вот пример скрипки.

http://jsfiddle.net/5Ut8x/1/

$('.edit').click( function() {
    var $form = $('<tr><td><form><input type="text" /><button class="cancel">cancel</button><button class="submit">Submit</button></form></td></tr>');
    $(this).closest('tr').hide().after($form);
    return false;
});

//on cancel click show old row and remove the form row 
$('table').on('click', '.cancel', function() {
    $(this).closest('tr').prev('tr').show().next('tr').remove();
});

//on submit click remove old row
$('table').on('click', '.submit', function() {
    $(this).closest('tr').prev('tr').remove();
});

Answer 2

В зависимости от версии jQuery, которую вы используете, попробуйте on() или delegate() вместо явной привязки обработчика щелчков, если вы хотите обойти проблему привязки.

// jQuery 1.7
$(document).on('click', '.edit', function() { ... });

// Previous versions
$(document).delegate('.edit', 'click', function() { ... });

Документы jQuery дляlive() (устарело) с примерами и ссылками на on() и delegate()