JQuery 没有接受对 div 的更改

Question

每当更新 div 时，我都会计算 div 中 <img> 标签的数量。 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

我不是 javascript 专家，但我认为 onchange 事件不能与 div 元素结合使用，只能与输入元素结合使用。因此，要获得您想要的行为，我能想到的最明显的方法是检查实际的 input 事件（字面意思是 input 事件）或定期轮询。要使用输入事件（我认为是 HTML5 特定的，也许吧？），你可以这样做：

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

不过请注意，这会引发很多。

Answer 2

您的 onchange 事件没有触发，因为您正在输入一个 contenteditable div，而不是输入元素。有关如何使用 div 执行类似于 onchange 的操作的更多信息，请参阅此线程：contenteditable change events

Answer 3

尝试在 #Description

输入 <img>

$('#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>

JQuery 没有接受对 div 的更改

JQuery is not picking up on changes to a div

jquery

ckeditor