jQuery如何在动态内容上设置焦点？

Question

在jquery中，我已经将一个<li>元素添加到了一个无序列表中。

如何聚焦于新创建的<li>元素？

如果我执行以下操作：

$("ul").append('<li><input type="text" value="Hi!"></li>');
$("li:last").focus(); //doesn't work because new <li> isn't in dom yet

如上所述，焦点无法正常工作。

我知道jquery 1.4.2有一个live()事件处理程序，它允许您为动态添加的元素加载事件处理程序，但我不确定我做错了什么：

$(document).ready(function () {

    $('li').live('load', function () {
       alert("hi!");
       $("li:last").focus();
    });
 });

- Alan

---

input 元素是一个空元素，它不应该有结束标签。你可能想把 hi! 放在一个 value 属性中。 - Quentin

@David，谢谢。这不是实际的代码，但我会修复它。 - Alan

2500次浏览量，却没有一个赞。好时光啊。 - Alan

Answer 1

您只能将焦点设置到可以保持焦点的元素上。默认情况下，列表项不能保持焦点。这就是为什么您的第一个示例失败的原因，不是因为它不在DOM中（它确实在DOM中，这就是append的作用）。

通常情况下，您应该使用设计用于保持焦点的元素（即将焦点设置在输入框而不是列表项上）。您还可以（但这不太向后兼容且不太合逻辑）使用HTML5的tabindex（可能将其设置为0）。 onload不起作用，因为列表项不会加载外部内容。

- Quentin

Answer 2

你可以尝试这个：$(YourElement).trigger("focus")。

- Nagaraja S

Answer 3

我知道这是一篇旧帖，但解决这个问题的简单方法是在您的 HTML 中创建一个文本输入框，并将其 CSS 设置为 "display: none;"。在 LI 的点击事件中，设置此输入框的焦点并侦听其 keypress 事件。

我已经做过了，它像魅力一样运作。

- Chololoco