jQuery .focus实际上并不关注新创建的元素

Question

假设我有这样的标记：

<div id="content">
  <div id="firstP"><p>First paragraph</p></div>
  <div id="secondP"><p>Second paragraph</p></div>
  <div id="thirdP"><p>Third paragraph</p></div>
  <div id="fourthP"><p>Fourth paragraph</p></div>
</div>

我想用jQuery添加一个新的<div>，并专注于这个新元素。.focus不做任何事情。

function addParagraph() {
  var html = "<div id=\"newP\"><p>New paragraph</p></div>";

  $("#content").append(html);
  $("#newP").focus();    
}

知道为什么吗？

Answer 1

我认为主要答案是不正确的。如果您为DIV和p标记指定了tabindex属性，则它们可以接收焦点。即

<div class="someclass" tabindex="100">

一旦指定了tabindex，就可以使用Tab键切换到这些元素，也可以使用.focus()转移焦点。

在这里使用scrollTo插件似乎有点过头了。

Answer 2

你的代码没有问题，只是段落或标签不能接收焦点。焦点只能放在你能与之交互的东西上，比如链接、输入元素、文本等。

要将窗口滚动到这个新添加的元素，您可以使用诸如ScrollTo之类的插件。

顺便说一句，你的代码可以简化一点：

var html = "<div id=\"newP\"><p>New paragraph</p></div>";
$("#content").append(html);
$("#newP p").focus();

var html = "<div id=\"newP\"><p>New paragraph</p></div>";
$(html)
    .appendTo('#content')
    .focus()   // or scrollTo(), now...
;

Answer 3

此代码将避免对其他插件的依赖，并允许您在任何元素上使用它。

$('html, body').animate({ scrollTop: $("#newP").offset().top }, 500);