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应该让这样的事情变得更好，这不是我想要使用的解决方法。

Answer 1

它似乎应该可以工作，但我想知道在调用回调时DOM是否未更新。您可能想看看引入延迟是否有帮助。

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

如果这不起作用，在页面上包含HTML以及通过load（）返回的内容将会有所帮助。

Answer 2

我在IE6和IE7上遇到了类似的问题，但setTimeout()不是一个可靠的解决方案。有时它有效，有时则没有。它根本不适用于某些机器，无论如何500ms的值完全是任意的。当然，focus()函数完全符合预期，但在Firefox和Chrome中都没有超时。

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

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

现在，我们首先做了我的意图。

无法将输入字段集中在装有ajax调用的DOM中

2 个答案: