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

尝试在<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>

Answer 2

我没有javascript专家，但我不认为onchange事件可以与div元素一起使用，只能输入。因此，为了获得您想要的行为，我能想到的最明显的方法是检查实际的input事件（字面意思是input事件）或定期轮询。要使用输入事件（我认为特定于HTML5，可能？），您可以执行以下操作：

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

请注意，这会触发批次。

Answer 3

你的onchange事件没有被触发，因为你正在输入一个可信的div，而不是输入元素。有关如何使用div进行类似onchange的更多信息，请参阅此主题：contenteditable change events

JQuery没有接受对div的更改

3 个答案: