javascript - 用编辑器(和返回)递归替换元素会破坏事件监听器

Question

背景:我的网站上有一些值可以通过 JavaScript 和 Ajax 进行编辑。 Ajax 工作正常，我可以编辑值，但保存值后，如果不重新加载页面，我无法再次编辑它。

我将问题简化为:原始元素被 HTML 表单替换。当提交表单时，表单本身被新版本的显示元素替换，但事件监听器被破坏。

我整理了一些示例 JS 代码 ( JSfiddle )，但它无法按我的预期工作。

var text = $('<em/>').text('click me!');

text.click(function() {
    var button = $('<input type="button" value="Click me, too" />');

    button.click(function() {
        $('#container').html(text);
    });

    $('#container').html(button);
})

$('#container').html(text);

会发生什么:

1. 显示当前值
2. 在文本点击后将文本替换为表单(为了简单起见，保存文本元素)
3. 按钮点击后再次显示文本
4. 点击文本再次起作用，如步骤 2 所示(现在不起作用)

为什么再次使用text对象时click事件会丢失？

Answer 1

使其工作而不重写整个结构的一个选项是使用绑定(bind)事件克隆元素:

text.click(function() {
    ...
    button.click(function() {
        $('#container').html(text.clone(true));
    });
    ...
})

$('#container').html(text.clone(true));

演示: http://jsfiddle.net/J8Sa7/2/