将焦点放在jQueryUI对话框中的第一个表单元素上

Question

我有一个用AJAX获取的登录表单，我想在jQuery UI对话框中显示它，并希望第一个输入字段具有自动对焦功能。我已经使用下面的代码使其工作，但我发现这是一个相当破解，并认为应该有一个更好的解决方案。此外，Chrome 23、IE9和Firefox 16的行为似乎是一致的，所以我想借此机会对这些东西有一个更深入的了解，并希望有人愿意透露一些信息。

我在SO和其他地方发现了许多相关的问题，但提出的答案似乎都不适合我。奇怪的是，许多问题都是关于相反的问题；即取消自动对焦。。。

表单获取等由使用jQuery热键插件的密钥Alt+l触发。第一个输入元素的id为"user"。代码是

$(document).bind('keydown', 'Alt+l', function () {
$('<div>', {
title: 'Log in'
}).load('?action=login').dialog({
modal: true,
show: 'fade',
hide: 'fade',
resizable: false,
draggable: false,
open: function (e) {
// Hack alert!
setTimeout(function () {
$('input:first', e.target).focus();
}, 100);
}
});
//$('#user').focus(); <- won't work; $('#user').length == 0
});

我不明白的是，为什么我必须将focus()调用放在超时时间内才能工作。如果选择未延迟超时，则选择$('input:first', e.target)(或等效的注释掉的$('#user'))为空。

如果有人能解释这种行为，或者给出更好的解决方案，我们将不胜感激！

更新

提取的HTML只是一个常规形式的

<form action="?action=login" method="post">
<table>
<tr><td><label for="user">Username:</label>
<td><input id="user" type="text" name="user">
<tr><td><label for="pass">Password:</label>
<td><input id="pass" type="password" name="pass">
<tr><td><td><input type="submit" value="Log in">
</table>
</form>

请注意，URL?action=login上的响应在GET和POST请求上不同

Answer 1

我认为问题是我太容易创建对话框；在CCD_ 6完成之前。因此，将回调中的对话框代码移动到load不会延迟：

$(document).bind('keydown', 'Alt+l', function () {
$('<div>', {
title: 'Log in'
}).load('?action=login', function () {
$(this).dialog({
modal: true,
show: 'fade',
hide: 'fade',
resizable: false,
draggable: false,
open: function () {
$('input:first', this).focus();
}
});
});
});

我认为load是同步的，因此在哪里选择$('input:first', this)并不重要，但事实似乎并非如此。

也可能只需要将选择放在一个单独的事件中，以便在包含load的事件处理完成后正确更新DOM。在这种情况下，这两种解决方案本质上是等效的，只是前者是一种丑陋的黑客攻击，而后者则不然

如果这些都是无稽之谈，请毫不犹豫地纠正我。