检测小胡子模板内的contenteditable div上的jquery事件

时间:2013-11-02 02:07:03

标签: javascript jquery contenteditable mustache

目标:将事件处理程序附加到嵌套在胡子模板/脚本中的contenteditable div。

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

该块是可编辑的,但是在脚本标记内不会触发可信事件。

我尝试了更多一般提示,例如: Detect keyup event of contenteditable child whose parent is a contenteditable divKeypress 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')
  });

1 个答案:

答案 0 :(得分:5)

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

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