2

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

我在 SO 和其他地方发现了许多相关的问题，但没有一个建议的答案似乎对我有用。奇怪的是，许多问题都针对相反的问题。即取消自动对焦...

表单获取等由Alt+l使用 jQuery Hotkey 插件的键触发。第一个输入元素的 ID 为“用户”。代码是

$(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>

请注意，对于?action=loginGET 和 POST 请求，URL 上的响应是不同的

4

1 回答 1

2

我认为问题在于我太早地创建了对话；之前load完成。因此，将回调中的对话框代码移动到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 正确更新。在这种情况下，这两种解决方案基本上是等价的，除了前者是丑陋的黑客，而后者不是。

如果其中任何一个是胡说八道，请不要犹豫，纠正我。

于 2012-12-01T15:01:20.623 回答