无法将输入字段集中在装有ajax调用的DOM中 [英] Can't focus input field in DOM loaded with ajax call

问题描述

我疯了，试图找出如何使这项工作。代码看起来大致如下：

I have gone insane trying to figure out how to make this work. Code looks roughly like:

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

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

The first time the change handler is fired, it does the ajax update, and the text box is focused.

但是，在后续更改中，它会继续执行ajax更新，但文本框永远不会再次聚焦。

However, on subsequent changes, it continues to do the ajax update, but the text box is never focused again.

我发现如果在 onDropDownChanged 中，我在ajax调用之前添加了 $（＃updatePanel）。empty（），文本框总是会集中注意力。问题是整个表格消失了一秒钟，导致一个丑陋的闪光。鉴于ajax应该让这样的东西很好，这不是我想要使用的解决方法。

I found that if in onDropDownChanged, I added $("#updatePanel").empty() before the ajax call, the text box would always get focused. The problem with that is the entire form disappears for a second, causing an ugly flash. Given ajax is supposed to make things like this nice, it's not a workaround I want to use.

推荐答案

好像它应该可以工作，但是我想知道在调用回调时DOM是不是更新了。你可能想知道是否介绍延迟有帮助。

It seems like it should work, but I wonder if the DOM isn't updated by the time the callback is invoked. You might want to see if introducing a delay helps.

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

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

Including the HTML on the page and what is returned via load() would be helpful if this doesn't work.

这篇关于无法将输入字段集中在装有ajax调用的DOM中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！