0

背景：我的网站上有一些值可以通过 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. 在 text clicked 文本替换为表单之后（为简单起见保存文本元素）
  3. 按钮click文本再次显示后
  4. clickon text 再次像第 2 步一样工作（现在不起作用）

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

4

2 回答 2

2

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

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

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

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

于 2012-06-04T16:03:53.677 回答
0

该.html()方法（重新）将innerHTML属性设置为文本值。这些字符串没有事件监听器——我认为这是 jQuery 中的一个错误，它.html()接受字符串（和函数）以外的任何内容；在这里，您的 jQuery 对象似乎甚至被字符串化了。

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

于 2012-06-04T15:57:31.160 回答