如何告诉jQuery内容可编辑div已更新 [英] How to tell jQuery a content editable div has been updated

问题描述

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

I want to use jQuery to select an item that has been added to an HTML5 content editable div. It doesn't work right now because the item wasn't present when the page was loaded. How do I tell jQuery that the div has been updated?

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

Please see this jsfiddle for test code: 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。

I have seen other questions about this, but none seem to apply to a content editable div.

推荐答案

尝试：

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

jsFiddle示例

jsFiddle example

由于您基本上绑定了动态元素，因此您需要使用 .on（）委派 #editor 元素上的click事件，因为编辑器中没有图像加载页面时的div。

Since you're essentially binding a dynamic element, you need to use .on() to delegate the click event on the #editor element because there is no image within the editor div when the page is loaded.

这篇关于如何告诉jQuery内容可编辑div已更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！