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后，您可以选中这些元素或使用.focus（）移动焦点。

使用scrollTo插件在这里看起来有点过分。

Answer 2

您的代码没有问题，只是段落或div标签无法获得焦点 。 只能将焦点放在可以与之交互的事物上，例如链接，输入元素，textareas等。

要将窗口滚动到此新添加的元素，可以使用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);

Answer 4

您需要使用HTML页面锚点而不是焦点。 例：

http://localhost/mypage.html#fourthP

Answer 5

我认为你正在寻找的是在jQuery中使用'ScrollTo'插件。 你可以在这里查看 。

您可以指定要滚动的内容......

$('div.pane').scrollTo(...);//all divs w/class pane

或者只是滚动窗口：

$.scrollTo(...);//the plugin will take care of this

有许多不同的方法来指定目标位置。 这些是：

• 原始数字
• 字符串（'44'，'100px'，'+ = 30px'等）
• DOM元素（逻辑上，可滚动元素的子元素）
• 一个选择器，它将相对于可滚动元素
• 哈希{top：x，left：y}，x和y可以是任何类型的数字/字符串，如上所述。

奖励：在挖掘这些信息时，我还发现了LocalScroll和SerialScroll （动画从一个项目滚动到下一个项目）。

Answer 6

您可以指定tabidex，然后可以将焦点设置为该元素

$('#table').attr("tabindex",1).focus();

这适用于Div Table等，它本身无法获得焦点。

Answer 7

只有形式元素等才能获得关注。 如果你想让浏览器向下滚动到那个特定的段落，那么jQuery没有“默认”的方式，但jQuery.ScrollTo上有一个插件，还有一个博客解释如何在动画滚动中手动执行jQuery的

Answer 8

代替

$("#newP").focus();  

它应该用于：

window.location.href=window.location.href + "#newP";