如何获取内容可编辑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

Answer 1

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> 

Answer 2

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>