使用编辑器（和返回）递归替换元素会中断事件侦听器

Question

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

我将问题简化为：原始元素被HTML表单替换。 提交表单时，表单本身将由新版本的display元素替换，但事件侦听器已损坏。

我把一些示例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. 在文本后click ed文本替换为窗体（为简单起见保存文本元素）
3. 按钮后再次click显示的文本
4. click文本再次工作，如步骤2（现在不起作用）

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

Answer 1

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

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

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

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

Answer 2

.html()方法 （re）将innerHTML属性设置为文本值 。 这些字符串没有事件监听器 - 我认为jQuery中的一个错误是.html()接受的不是字符串（和函数） ; 在这里，你的jQuery对象似乎甚至是字符串化的。

要将内容更改为现有DOM节点，您需要.empty()容器（或.remove()文本元素）和.append()按钮元素。