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>

Testing for ContentEditable support

再考虑一下你的问题以及你现有的框架 - 我认为你可以通过使用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() { ... });

live()的jQuery文档（已弃用），包含示例和指向on()和delegate()的链接

jQuery - 将表单插入DOM，然后绑定事件，然后返回到先前的状态

2 个答案: