ajax 加载后 IE 焦点事件随机失败答案

【问题标题】：IE focus event randomly fails after ajax loadajax 加载后 IE 焦点事件随机失败
【发布时间】：2012-06-27 22:49:24
【问题描述】：

目前，我们只支持 IE8。

我有一个 ajax 调用，它从服务器获取数据，用响应替换容器 div 中的 HTML，然后尝试将焦点放在响应中包含的元素上。

依赖[IE魔法]？有时此代码有效，有时则无效。我需要找到可以 100% 工作的东西。 console.log 语句 100% 的时间记录正确的 ID，即使焦点失败。

$.ajax({
    type: 'POST',
    url: that.Url,
    contentType: 'application/json; charset=utf-8',
    dataType: 'html',
    data: dataToSend,
    success: function (response) {
        $(container).html(response);
        that.initialize();

        var element = document.getElementById(elementId);
        setTimeout(function () {
            setTimeout(function () {
                setTimeout(function () {
                    setTimeout(function () {
                        setTimeout(function () {
                            setTimeout(function () {
                                console.log($(element).attr('id'));
                                element.focus();
                            }, 10);
                        }, 10);
                    }, 10);
                }, 10);
            }, 10);
        }, 10);
    }

嵌套的 setTimeouts 用于查看在较早的超时期间是否有其他东西被放入堆栈。我尝试将单个 setTimeout 设置为 1000，但仍然看到随机故障。我尝试用$(container)[0].innerHTML = response; 替换$(container).html(response);，但仍然无法始终如一地工作。我尝试用$(container).find('#' + elementId) 替换document.getElementById(element)。我还尝试将var element = document.getElementById(elementId); 移动到 setTimeout 中，但仍然看到随机失败。使用 Firefox，需要 0 个 setTimeouts 并且代码运行完美，但不幸的是，这不是我们的选择。将console.log 更改为alert 确实可以解决问题，但这只是因为它会将焦点延迟到单击“确定”之后，但额外的鼠标单击对于可用性来说很糟糕。

that.initialize() 为新元素添加类、添加事件、修改新元素的宽度/高度等……所有这些都 100% 有效。

【问题讨论】：

initialize 是否引入了诸如在事后操纵 DOM 的超时之类的东西？注入的 HTML 是否包含导致副作用的脚本？
我发现这是一个非常常见的问题，大多数解决方案都使用超时。另一个网站声称连续两次调用.focus() 总是有效的。我没有旧的 IE 来测试，但试一试第二个选项。
感谢雅各布！到目前为止，连续两次对焦效果最好。我将不得不对其进行更多测试，但我还没有看到失败。
酷，我会发布作为答案。

标签： javascript jquery ajax internet-explorer-8 dom-manipulation

【解决方案1】：

这似乎是旧 IE 中的一个真正错误。据报道，一个有效的技巧是连续两次调用.focus()。

【讨论】：

哇，谢谢。在更新后（在 XP IE 兼容模式下工作），这对我来说破坏了 XP IE，我一直在撤消代码更改，但无法确定是什么出现了。不过，这解决了它。

【解决方案2】：

不应该是$(element).focus() 而不是element.focus() 吗？ focus 是一个 jQuery 方法，必须在 jQuery 对象上调用。

【讨论】：

$(element).focus() 是聚焦到 jquery 对象的 jquery 方法，而 element.focus() 是聚焦在 DOM 元素上的 javascript 方法 (w3schools.com/jsref/met_html_focus.asp)。在这种情况下，我都尝试过，但都没有一致地工作。