How to get the new text of a content editable div?

Question

I have the following html:

<div class="custom_title" contenteditable="true" maxlength="50">
   WRITE YOUR CUSTOM TITLE HERE
</div>

Then I do:

$("#search_wiki").on("click", function() {
  myGoogle();
});

Which calls:

var termS;  
function myGoogle() {
  termS = $(".custom_title").html();
  console.log(termS);

Yet when I change the text on that div, the console stills gives me the old text and not the new one

i'll give it another try yet wasn't working as it is not picking up the new text changes — rob.m, Sep 21 '17 at 00:53
@GabyakaG.Petrioli yes exactly I'd expect it, driving me a bit mad on here — rob.m, Sep 21 '17 at 00:55
also you can have something like this only `$("#search_wiki").on("click", myGoogle);` — guradio, Sep 21 '17 at 00:56
going to try this answer https://stackoverflow.com/a/6256386/1018804 — rob.m, Sep 21 '17 at 00:58
Look at my following answer: it's working. this is the formal way by JQuery. — Mohamed Abulnasr, Sep 21 '17 at 01:25

score 0 · Answer 1 · answered Sep 21 '17 at 00:57

0

It works fine in the snippet:

$("#search_wiki").on("click", function() {
  myGoogle();
});

var termS;  
function myGoogle() {
  termS = $(".custom_title").html();
  console.log(termS);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom_title" contenteditable="true" maxlength="50">
   WRITE YOUR CUSTOM TITLE HERE
</div>

<h1 id="search_wiki">Search wiki</h1>

answered Sep 21 '17 at 00:57

Commercial Suicide

14,875
14
62
80

yeah.. but not working on here, i'm going to try this https://stackoverflow.com/a/6256386/1018804 – rob.m Sep 21 '17 at 00:58

score 0 · Answer 2 · edited Sep 21 '17 at 02:58

Just add jQuery on events inside ready event like this:

<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  $(document).ready(function() {
    $("#search_wiki").on("click", function() {
      myGoogle();
    });
  });

and the html as you made:

<div class="custom_title" contenteditable="true" maxlength="50">
  WRITE YOUR CUSTOM TITLE HERE
</div>
<h1 id="search_wiki">Search wiki</h1>

How to get the new text of a content editable div?

2 Answers2