Focusing on the nested content element

Question

So, I have two contenteditable divs nested inside another:

<div class="top" contenteditable="true">
     <div class="nested" contenteditable="true">This</div>
</div>

Here is the fiddle .

When it is focused, nestedit should be focused, but using console.log(document.activeElement);, it shows that it is topfocused and does not recognize the div nested.

In the case that the content is being edited, I need to recognize the nesteddiv element instead of the element top.

How can i achieve this? Any help would be greatly appreciated.

Answer 1

[contenteditable] , [contenteditable] - , . . :

, - , , . . ( , ). , . , .

, , . . :

$('div.top [contenteditable]').on('focusin focusout', function(e) {
    $(this).parents('[contenteditable]').prop('contenteditable', e.type === "focusout");
});

-updated jsFiddle -