Javascript - sendkeys для правильного динамически созданного div

Question

Я немного потерял начало кода для своего сценария.

Я разрешаю пользователю динамически создавать divs, нажимая на кнопку добавления нового div и удаляя кнопку div. Поэтому пользователь может быть сфокусирован внутри любого div на странице, и мне нужно сделать событие нажатия клавиши для правильного div.

У меня есть несколько кнопок для вставки Mathml в левой части экрана. Я хочу, чтобы у вас была возможность щелкнуть по кнопке и ввести код Mathml в div, на котором в данный момент находится пользователь.

Из того, что я читал, я считаю, что мне нужно прикрепить прослушиватель событий к каждому div поскольку он создается и удаляет его, когда пользователь удаляет div (я поддерживаю индекс div).

Как отправить событие нажатия клавиши с кнопки на div, в котором находится пользователь, не теряя при этом фокус на div и убедившись, что Mathml переходит в правильный div?

Я знаю, что в vb или C# .net это 2-секундная работа, но javascript кажется настоящим кошмаром для такого типа функциональности.

Любая помощь/указатели/советы и т. Д. Были бы очень желанными.

Answer 1

Хорошо, поэтому я создал эту скрипку для вас, чтобы посмотреть, как может выглядеть возможное решение.

https://jsfiddle.net/1u0uw0df/

HTML

<div id="container"> 
</div> 
<button type="button" id="AddBtn"> 
Add 
</button> 
<button type="button" id="RemoveBtn"> 
Remove 
</button> 

JQuery

var No = 0; 
var focusedElement; 
$(document).ready(function() { 
    $('#container').on('click','div',function() { 
     focusedElement = this; 
    }); 

    $('#AddBtn').on('click',function() { 
     $('#container').append('<div>Test'+No+'</div>'); 
     No++ 
    }); 

    $('#RemoveBtn').on('click', function() { 
     focusedElement.remove(); 
    }); 
});