目标:将事件处理程序附加到嵌套在胡子模板/脚本中的contenteditable div。
问题:我有一个我想要编辑的小胡子js模板。这个想法是,在keyup上它应该触发一个事件(以后用于更新相同的数据服务器端)。
该块是可编辑的,但是在脚本标记内不会触发可信事件。
我尝试了更多一般提示,例如: 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')
});
答案 0 :(得分:5)
将事件绑定到绑定时存在于dom中的父级(委托)
$(document.body).on('keyup','.editable', function() {
alert('editable changed')
})
.on('click','.child', function() {
alert('static child changed')
});