如何告诉 jQuery 内容可编辑的 div 已更新答案

【问题标题】：How to tell jQuery a content editable div has been updated如何告诉 jQuery 内容可编辑的 div 已更新
【发布时间】：2012-11-19 18:33:24
【问题描述】：

我想使用 jQuery 选择已添加到 HTML5 内容可编辑 div 的项目。它现在不起作用，因为加载页面时该项目不存在。 如何告诉 jQuery div 已更新？

请参阅此 jsfiddle 以获取测试代码：http://jsfiddle.net/kthornbloom/sjHYQ/

$(document).ready(function() {

<!-- This wont work on an image dragged into the div after page load -->
$('#editor img').click(function(){
    $(this).fadeOut();
});

});

我看到了其他关于此的问题，但似乎没有一个适用于内容可编辑的 div。

【问题讨论】：

标签： jquery html contenteditable

【解决方案1】：

试试：

$('#editor').on('click', 'img', function() {
    $(this).fadeOut();
});

jsFiddle example

由于您实际上是在绑定一个动态元素，因此您需要使用.on() 将点击事件委托给#editor 元素，因为加载页面时编辑器 div 中没有图像。

【讨论】：

谢谢，这就是我想要的。也感谢 .on() 的快速解释

【解决方案2】：

您需要使用.on() JQuery function 将事件附加到动态创建的元素

这里是一个例子（我使用body作为主要容器，但你需要更具体）：

$("#editor").on({
    click: function (event) {    
        console.log('test')
       $(this).fadeOut();
    }
    },
    "img"
);

这是小提琴http://jsfiddle.net/sjHYQ/2/

【讨论】：