JQuery is not picking up on changes to a div

Question

I'm trying to count the amount of <img> tags in a div whenever a div is updated. The HTML is simply:

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

Whenever the div's contents are changed, I want JQuery to count the the number of images in the div. So I wrote this:

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

The problem is that nothing happens. I don't get an alert when I type stuff into the div or insert an image. Am I overlooking something simple? I'm using CKEditor as the rich text editor for the div but I don't think its the problem, however I'm no expert.

Here is a JSFiddle to demo the problem http://jsfiddle.net/jLnLmspn/1/

See here: http://stackoverflow.com/questions/1391278/contenteditable-change-events — Mex, Feb 15 '15 at 23:32
Look at the source code while you type into the div and you will see that it only updates strings of text and `
`s — JJJ, Feb 15 '15 at 23:34
The change event is sent to an element when its value changes. This event is limited to elements, boxes and <select> elements.</select> — suish, Feb 15 '15 at 23:34

guest271314 · Answer 1 · 2015-02-16T14:13:09.090

Try typing <img> at #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>

score 1 · Accepted Answer · answered Feb 15 '15 at 23:39

1

I'm no javascript expert, but I don't think the onchange event can be used in conjunction with a div element, only input ones. As such, to get the behavior you want, the most obvious way I can think is to check for actual input events (literally the input event) or to periodically poll. To use the input event (which I think is HTML5 specific, maybe?), you could do something like:

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

Be aware though, this will fire a lot.

answered Feb 15 '15 at 23:39

ttacon

503
3
9

how did you know that 'input' is an event? i can't see in the docs anywhere http://api.jquery.com/category/events/ – volume one Feb 16 '15 at 00:04
@JosanIracheta is correct - when looking for specs the Mozilla docs are _quite_ nice. – ttacon Feb 16 '15 at 13:42
This works when I type into the div. But I am also using Javascript to inserts data in such as an img tag. It doesn't pick up on that insertion. How could I pick up on that? – volume one Feb 17 '15 at 16:46
If you're using javascript to insert text there, you can programmatically make it trigger the event `$('#Description').trigger('input')`, or something along those lines. – ttacon Feb 17 '15 at 17:09

score 0 · Answer 3 · edited May 23 '17 at 11:43

0

Your onchange event isn't firing because you're typing into a contenteditable div, not an input element. See this thread for more info on how to do something similar to onchange with a div: contenteditable change events

edited May 23 '17 at 11:43

Community

1
1

answered Feb 15 '15 at 23:39

Brock Amhurst

497
2
5

JQuery is not picking up on changes to a div

3 Answers3