无法将输入字段集中在装有ajax调用的DOM中
我疯了,试图找出如何使这项工作。 代码看起来大致如下:
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应该让这样的事情变得更好,这不是我想要使用的解决方法。
它似乎应该工作,但我想知道在调用回调时DOM是否未更新。 您可能想看看引入延迟是否有帮助。
function onPanelLoaded() { setTimeout( function() { $("#theTextInput").focus(); }, 500 ); }
如果不起作用,在页面上包含HTML以及通过load()返回的内容将会很有帮助。
IE6和IE7有类似的问题,但是setTimeout()
不是一个可靠的解决方案。 有时它有效,有时则没有。 它根本不适用于某些机器,500毫秒的价值完全是任意的。 当然, focus()
函数完全符合预期,在Firefox和Chrome中都没有超时。
我的解决方案是为IE调用focus()
两次 :
function onPanelLoaded() { var panel = $('#theTextInput'); panel.focus(); panel.focus(); }
现在,我做了我想要的第一个。