使用編輯器（和返回）遞歸替換元素會中斷事件偵聽器

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()按鈕元素。