在 mustache 模板内的 contenteditable div 上检测 jquery 事件

Question

目标：将事件处理程序附加到嵌套在 mustache 模板/脚本中的可内容编辑 div。

问题：我有一个想要编辑的小胡子 js 模板。这个想法是，在 keyup 上它应该触发一个事件（用于稍后更新相同的数据服务器端）。

块是可编辑的，但 contenteditable 事件不会在脚本标签内触发。

我尝试了更一般的提示，例如： Detect keyup event of contenteditable child whose parent is a contenteditable div 和 Keypress event on nested content editable (jQuery) 但没有一个处理模板场景。

---

HTML

<script id="post" type="text/template">
    <div class="editable" contenteditable="true">  
        <h2>{{bio}}</h2>
        <p>{{summary}}</p>
    </div>

    <span class="child" contenteditable="true">static inside template.</span>

</script>

JQuery

  $('.editable').on('keyup', function() {
      alert('editable changed')
  });

  $('.child').on('click', function() {
    alert('static child changed')
  });

Answer 1

将事件绑定到绑定时存在于 dom 中的父级（委托）

$(document.body).on('keyup','.editable', function() {
  alert('editable changed')
  })
 .on('click','.child', function() {
    alert('static child changed')
  });