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);

会发生什么：

显示当前值
文本click后的文本替换为表单（为简单起见保存文本元素）
再次显示按钮click文本后
click在步骤2中再次起作用（现在不起作用）

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

Answer 1

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

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

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

DEMO： http://jsfiddle.net/J8Sa7/2/

Answer 2

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

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

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

2 个答案: