动态创建的li不会单击.focus()

Question

$('#spell-check').on('click', 'li', function() { 
  $(this).focus()
});

<ul id="spell-check">
  <li tabindex="1">suggestion 2</li>
  <li tabindex="2">suggestion 1</li>
</ul>

<li>是动态添加到这个列表中的，但是<ul id="spell-check">是在加载中包含的。问题是，在点击它之后，<li>就不会聚焦。请问我做错了什么？

，这是一个编辑，我刚刚发现问题是我没有为焦点应用任何css，比如：

#spell-check li:focus {
  border: 1px solid blue;
}

但我不明白的是，为什么当李是专注的时候，铬浏览器的样式不适用于这个场合？因为当我基于击键事件聚焦相同的元素时，它确实应用了铬蓝色边框而没有添加:焦点css？

因此，当我这样做时，(标准Chrome)聚焦的蓝色边框被应用于：

$('input').on('keyup', function(e) {
   var $spellSuggestList = $("#spell-check");
   if (e.keyCode == 40) {
     $("li:first-child", $spellSuggestList).focus();
     return
   }
})

不管怎么说，我不知道这是否合适，但总有一天它会帮到别人的。

Answer 1

您需要向动态创建的tabindex添加一个<li>属性。工作实例：

​

$('#spell-check').on('click', 'li', function() { 
  $(this).focus()
});
$('#spell-check').append('<li tabindex="-1">foobar</li>')

:focus {
    border: 1px solid red;
}

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

<ul id="spell-check">
  <li tabindex="1">suggestion 2</li>
  <li tabindex="2">suggestion 1</li>
</ul>

​

参考资料：Why div:focus does not works without tabindex