javascript - 检查可编辑 div 中的状态变化

Question

我希望能够检测 div 中是否发生了某些变化。我有两个 div，一个用于标题，一个用于消息，我可以只使用正常的输入方法，如 textarea 和文本输入，但我希望网站的外观时尚，宁愿它们看起来像正常的网页元素，直到用户点击它们(我也在使用 CKEditor 进行内联文本编辑)。

<h1 contenteditable="true" class="editable-header">A Heading</h1>

<div class="update-text" contenteditable="true">
    A message
</div>

所以我希望能够使用 Jquery 在其中一个框中发生更改时更改按钮的状态。

我试过用

$(".editable-header").change( function(){
    console.log("Something has changed!");
 });

但是这个好像不火，我也试过了

$(".editable-header").on("change", function(){});

用一个可编辑的 div 来改变这个？如果是，怎么办？

Answer 1

h1 不是 input 元素，所以当 h1 里面的内容改变的时候 你需要附加 event，看示例代码

<h1 contenteditable="true" class="editable-header">A Heading</h1>

<div class="update-text" contenteditable="true">
    A message
</div>
<input type="button" value="Change title"/>

和 jQuery 代码

$(".editable-header").change( function(){
    alert("Something has changed!"); 
 });

$("input[type=button]").on('click', function(){
   $(".editable-header").text("Fooo").trigger("change");
   //OR $(".editable-header").text("Fooo").change();
});

DEMO

更新 评论，如果 element 是 contenteditable="true"则此代码可以工作，甚至可以通过关键字或动态更改内容。

$(".editable-header").on('keyup change', function(){
    alert("Something has changed!"); 
 });