动态创建的summernote textarea - 如何在更改时触发功能答案

【问题标题】：Dynamically created summernote textarea - how to trigger function on change动态创建的summernote textarea - 如何在更改时触发功能
【发布时间】：2019-03-28 08:35:37
【问题描述】：

我正在动态创建一个summernote 文本区域并用初始数据填充它。当这些数据发生变化时，我想调用一个函数来更新数据库。对于“输入”字段，“onchange”有效（在您进行更改然后离开该字段时触发）所以我按照下面的方法在这里尝试了它。这不起作用（离开现场时没有触发）并且没有控制台日志消息。

var  json = json + "<textarea class='summernote col-lg-12 col-md-12 col-sm-12 col-xs-12' id='ymSpecificLine' name='ymSpecificLine' rows='1'"
    	  							+ "' onchange='taskDetailUpdateFunction(\"" + awardDetail.getAdDescription().replace("\"", "&quot;") + "\", \"" + encoded_task_detail_ID.replace("\"", "&quot;") + "\")'>";
    json = json + awardDetail.getAdDescription();
    json = json + "</textarea>";

【问题讨论】：

标签： jquery html summernote

【解决方案1】：

Summernote 有可以为此调用的方法： https://summernote.org/deep-dive/#callbacks

您将调用此处定义的 onChange 方法： https://summernote.org/deep-dive/#onchange

【讨论】：

我一直在努力解决这个问题，当我离开页面然后重新显示它时，所见即所得有时会显示然后不显示（只是一个文本框）。最后，通过反复试验，我发现""$('.summernote').summernote({});"和"$('.summernote').on('summernote.blur',function(){ alert('Editable area loses focus'); });" must go after the "$(responseJson1a).appendTo($("#button-container"));". 所以有一个提示给任何追随我的人.
下一个问题是无论是否进行更改都会触发模糊功能。有没有办法只在进行更改时离开编辑器时才通知？如果有人进行了更改，然后在离开前删除了更改，则需要捕获该更改，最终效果是没有更改。
另外两个问题：使用工具栏时会触发模糊。如果您从一个编辑器单击到另一个编辑器，则模糊会进入无限循环。我在这项工作中动态创建了许多编辑器。
好的，不要使用“alert”来解决循环。但是，仍然存在使用工具栏触发模糊的问题。

【解决方案2】：

一个简单的班轮可能会有所帮助。

$('.summernote').trigger('summernote.change');

【讨论】：

【解决方案3】：

您必须使用 innerHTML 将其注入到您的 DOM 中：

var json = "<textarea class='summernote col-lg-12 col-md-12 col-sm-12 col-xs-12' id='ymSpecificLine' name='ymSpecificLine' rows='1' onchange='onChange()'></textarea>";
document.getElementById("demo").innerHTML = json;

function onChange(){
  console.log("Value changed to: "+document.getElementById("ymSpecificLine").value);
}

<p>Change my value then press TAB:</p>
<div id="demo"></div>

【讨论】：