通过Ajax调用加载的DOM中无法聚焦输入框

Question

我一直在疯狂地尝试弄清楚如何让这个工作。代码大致如下：

function onDropDownChanged() {
  $("#updatePanel").load(
    "myUrl",
    { id: $("#myDropDown option:selected").val() },
    onPanelLoaded
  );
}
function onPanelLoaded() {
  $("#theTextInput").focus();
}
$(document).ready(function() {
  $("#myDropDown").change(onDropDownChanged);
}

第一次触发更改处理程序时，它会执行ajax更新，并将文本框聚焦。

然而，在随后的更改中，它继续执行ajax更新，但文本框再也没有被聚焦。

我发现如果在onDropDownChanged中，在ajax调用之前添加$("#updatePanel").empty()，则文本框始终会被聚焦。但问题是整个表单会消失一秒钟，造成不好的闪烁效果。考虑到ajax应该使这样的事情变得更加美好，这不是我想使用的解决方法。

- jessicah

---

你能否发布一下你正在操作的HTML代码片段，以及ajax调用加载的HTML代码是什么？ - TM.

Answer 1

看起来应该是可行的，但我怀疑在回调被调用时DOM是否已经更新。你可以尝试引入延迟来解决这个问题。

function onPanelLoaded() {
     setTimeout( function() { $("#theTextInput").focus(); }, 500 );
}

如果这种方式不起作用，包括页面上的HTML和通过load()返回的内容会非常有帮助。

- tvanfosson

---

这也是我的猜测...尽管它不在文档中。查看HTML肯定有助于解决问题。 - TM.

设置延迟应该是有效的，即使延迟为0。有时候只需要“延迟”调用，以便通过 innerHTML 插入的内容可用于 DOM。 - savetheclocktower

Answer 2

我曾经遇到过IE6和IE7类似的问题，但是setTimeout()并不是一个可靠的解决方案。有时它可以工作，有时它不能。在某些机器上根本就不起作用，而500ms的值也完全是随意的。当然，在Firefox和Chrome中，focus()函数按预期工作。

我的解决方案是对IE调用focus() 两次：

function onPanelLoaded() {
    var panel = $('#theTextInput');
    panel.focus();
    panel.focus();
}

现在，这做到了我一开始想要的。

- Chris