I have created an element using javascript and trying to bind focus/blur event, but it is not firing. How can I acheive the same?
var parentContainer = document.getElementById('parent');
var container = document.createElement('div');
container.innerHTML = '<p>Hello</p>';
container.style.userSelect = "none";
container.style.MozUserSelect = "none";
parentContainer.appendChild(container);
$(container).focus(function () {
$(this).css('border', '1px solid')
}).blur(function () {
$(this).css('border', '')
});
//container.addEventListener('focus',function () {
// $(this).css('border', '1px solid')
//})
//container.addEventListener('blur',function () {
// $(this).css('border', '')
//})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='parent'>
</div>