コンテンツの編集可能なdivの新しいテキストを取得する方法は？

Question

私は次のようなHTMLがあります。

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

その後、私が行います

呼び出す

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

：

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

をしかし、私はそのdiv要素のテキストを変更すると、コンソールの静止画が与えるを私は新しいテキストではなく古いテキスト

Answer 1

スニペットでうまく動作します：

$("#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

ただ、このようなreadyイベントの内部イベントでのjQueryを追加します。あなたが作ったとして

<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(); 
    }); 
    }); 

とhtml：

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