0

I am currently writing HTML and JS code in the following form, but when I put a new value in the div tag value, the event does not happen.

the Javascript code is

$('#CdText').on('input', function () {
    $('#CdText').innerHTML = concat($('#CdText').innerHTML, 'test');
});

HTML is

<div id="CdText" class="ui-state-highlight" contenteditable="true">1234</div>

The above code does not work.
However it works

$('#appInput').on('input', function () {
   $('#appInput').val(concat($('#appInput').val(), 'test'));
});

because HTML is

<input id="appInput" class="form-control ap-input">
  <div>1234</div>
</input>

By the way, changing $('#CdText').on('input', function () { as follows did not work.
$('#CdText').on('div', function () {
$('#CdText').on('change', function () {
$('#CdText').on('change', 'div', function () {

I hope I'm doing something wrong with Jquery's use of the on() method, but as of yet I haven't found what's wrong.

If you know how to write an event to be triggered every time something is entered into a div like the above, please let me know.

By the way, $('#CdText').on('input', function () { is properly contained in $(function () {}).
css of CdText div tag is inline-block. so it can write as input.

Thank you for reading.

Matha
  • 41
  • 1
  • 4
  • Jquery has `.html()`, similar to `.val()` in the second example; `.innerHTML` and `.value` only work for vanilla dom nodes – skara9 Jul 12 '22 at 03:00
  • 1
    Does this answer your question? [contenteditable change events](https://stackoverflow.com/questions/1391278/contenteditable-change-events) – BigLiao Jul 12 '22 at 03:12
  • 2
    The `input` event fires when the value of an ``, ` – dale landry Jul 12 '22 at 04:02
  • Thanks. I changed contenteditable tag. And then it worked I want. Thank you to refer contenteditable. – Matha Jul 12 '22 at 07:12
  • @Matha Changed it how? To make this answer useful to future visitors, consider posting your answer. Or, if it turns out [the linked answer](https://stackoverflow.com/questions/1391278/contenteditable-change-events) solves your problem, close this question as a duplicate of it. – Don't Panic Jul 12 '22 at 08:14

1 Answers1

0

You can use the contenteditable attribute while listening with .on('input'), however .innerHTML is made for vanilla JS, for jQuery you should use .html().

Nicola Spadari
  • 549
  • 3
  • 10