可編輯DIV的孩子上的鍵盤事件

Question

我只是想要keyup，甚至工作在孩子上，但不是在父母，只是顯示在下面的例子，它在父母上，但不是在孩子上。

這裏是我的jQuery：

// This works 
$('#editor').on('keyup change', function(){ 
    console.log('keyup event works on Parent'); 
}); 

// This doesn't do anything 
$('#editor').on('keyup change', '.js-selected-text', function(){ 
    console.log('How to make keyup event work for child'); 
}); 

這裏是我的標記，類孩子js-selected-text將動態地添加，所以我用.on()綁定。

<div id="editor" class="wysihtml5-editor" contenteditable="true">Lorem <span class="js-selected-text">Ipusum</span> dolo solo polo</div> 

Answer 1

通過使用DOMSubtreeModified你可以做到這一點。

$("#editor").on('DOMSubtreeModified', ".js-selected-text", function() { 
 
    console.log('How to make keyup event work for child'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="editor" class="wysihtml5-editor" contenteditable="true">Lorem <span class="js-selected-text">Ipusum</span> dolo solo polo</div>

Answer 2

試試下面的代碼

採取看看Detect keyup event of contenteditable child whose parent is a contenteditable div

HTML

<div id="editor" class="wysihtml5-editor" contenteditable="true"> 
    Lorem 
    <span contenteditable="false"> 
     <span class="js-selected-text" contenteditable="true"> 
      Ipusum 
     </span> 
    </span> 
    dolo solo polo 
</div> 

jQuery的

// This works 
$('#editor').on('keyup change', function(){ 
    console.log('keyup event works on Parent'); 
}); 

// This doesn't do anything 
$('#editor').on('keyup change', '.js-selected-text', function(e){ 
    console.log('How to make keyup event work for child'); 
    e.stopPropagation(); 
}); 

這裏是工作的jsfiddle：https://jsfiddle.net/gg456p7a/