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

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

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

$(document).ready(function() {  $('#editor img').click(function(){ $(this).fadeOut(); }); });​ 

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

Answer 1

尝试：

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

jsFiddle示例

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

Answer 2

您需要使用.on（）JQuery函数将事件附加到动态创建的元素

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

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

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