jQuery无法绑定焦点事件

Question

我已经使用javascript创建了一个元素，并试图绑定focus / blur事件，但是没有触发。我该如何做到相同？

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>

Answer 1

为了集中关注div，您需要向div添加tabindex。我建议您使用鼠标悬停或悬停来应用或做任何特定的事情，因为应该将focus属性用于输入字段

<div id='parent' tabindex="100">

</div>