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

【问题标题】：jQuery - insert form into DOM, then bind events, then return to previous statejQuery - 将表单插入 DOM，然后绑定事件，然后返回之前的状态
【发布时间】：2012-01-09 02:12:37
【问题描述】：

我正在尝试使用 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 元素，但只会绑定一次。我不能在不丢失事件绑定的情况下删除元素。

对我的设计方法有什么问题有什么想法吗？

【问题讨论】：

与您的问题没有直接关系，但请不要将点击事件放在 <div> 这样的元素上：<a> 标签更好，因为它可以通过键盘访问（除非您不这样做）不关心不能或不使用鼠标的用户）。此外，您似乎将新创建的表单设置为 <tr> 元素的子元素 - 实际上 <tr> 元素应该只包含 <td> （或 <th>）元素作为直接子元素，然后您的表单应该是<td>（因此，如果您希望表单替换所有当前行，您应该尝试类似<td colspan="6"><form>...</form></td>）。
关于锚点的观点......我打算将表单包装在一个 td 元素中。感谢您了解。

标签： jquery ajax forms

【解决方案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();
});

【讨论】：

甜蜜。这真的很有帮助。我在想我可能必须将表单放入标记中并按照您的建议隐藏它，并且您的解决方案很整洁。谢谢。另外，我不知道 contenteditable 属性！我一定会玩的。

【解决方案2】：

根据您使用的 jQuery 版本，如果您想解决绑定问题，请尝试使用 on() 或 delegate() 而不是显式绑定点击处理程序。

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

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

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

【讨论】：