jquery - 将焦点集中到 jQueryUI 对话框中的第一个表单元素

Question

我有一个使用 AJAX 获取的登录表单，我想将其显示在 jQuery UI 对话框中，并希望第一个输入字段具有自动焦点。我已经使用下面的代码让它工作了，但我发现它是一个相当大的黑客，并且认为应该有一个更好的解决方案。此外，该行为在 Chrome 23、IE9 和 Firefox 16 上似乎是一致的，因此我想借此机会更深入地了解这些东西，并希望有人愿意提供一些线索。

我在 SO 和其他地方找到了许多相关问题，但所提出的答案似乎都不适合我。奇怪的是，许多问题都是关于相反的问题。即删除自动对焦...

表单获取等是通过使用 jQuery Hotkey 插件的 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

我认为问题是我创建对话框太早了；在加载完成之前。因此，将回调中的对话框代码移动到 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) 在哪里并不重要，但是看来并非如此。

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

如果本文有任何废话，请随时纠正。