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可以执行此操作。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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/

可编辑DIV的孩子上的键盘事件

2 个答案: