JQuery 没有检测到 div 的更改

Question

我正在尝试计算 <img> 的数量每当更新 div 时，都会在 div 中添加标签。 HTML 很简单:

<div id="Description" contenteditable="true"></div>

每当 div 的内容发生更改时，我希望 JQuery 计算 div 中的图像数量。所以我写了这个:

$(document).on('change', '#Description', function(e) {
    var filenumber = $('#Description img').length;
    alert(filenumber);
});

问题是什么也没发生。当我在 div 中输入内容或插入图像时，我没有收到警报。我是否忽略了一些简单的事情？我使用 CKEditor 作为 div 的富文本编辑器，但我不认为这是问题，但我不是专家。

这里有一个 JSFiddle 来演示该问题 http://jsfiddle.net/jLnLmspn/1/

Answer 1

尝试输入<img>在#Description

$('#Description').on("keyup keydown", function(e) {
    var html = $.parseHTML(e.target.textContent)
    , filtered = $(html).filter("img")
    , imgs = filtered.is("*") 
             ? filtered.length + " images found" 
             : "0 images found";
    console.log(imgs);              
});

#Description {
height: 500px;
    width: 300px;
    border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="Description" contenteditable="true"></div>