将焦点设置为动态加载的DIV中的字段

Question

将焦点设置为动态加载的DIV中的特定字段的正确方法是什么？

$("#display").load("?control=msgs"); // loads the HTML into the DIV
$('#display').fadeIn("fast"); // display it
$("tex#header").focus();          // ?? neither that
$("input#header").focus();        // ?? nor that
$('#display', '#header').focus()  // ?? nor that
$("#header").focus();             // ?? nor that works

将以下HTML提取到displayDIV中:

<div id="display">
<form id="newHeaderForm" class="dataform" action="/" method="post">
    <input id="to" type="hidden" value="22" name="to"/>
    <dl>
        <dt>Header</dt>
        <dd>
            <input id="header" class="large" type="text" name="header" value="" maxlength="128"/>
        </dd>
 </form>
 </div>

非常感谢!

Answer 1

load()函数是一个异步函数.您应该在load()调用完成后设置焦点,即load()的回调函数,因为否则您通过#header引用的元素尚不存在.例如:

$("#display").load("?control=msgs", {}, function() { 
  $('#header').focus();
}); 

即使使用这个解决方案我也遇到了问题,所以我在回调中做了一个setTimeout,并将焦点设置在超时中以使/确实/确定该元素存在.

Answer 2

您是否尝试过按Id选择？

$("#header").focus();

看作Ids应该是唯一的,不需要更具体的选择器.

Answer 3

是的,当操作一个尚不存在的元素时会发生这种情况(这里的一些贡献者也使用唯一ID做了一个好点).我遇到了类似的问题.我还需要将一个参数传递给操作即将呈现的元素的函数.

在这里检查的解决方案对我没有帮助.最后我找到了一个开箱即用的产品.它也很漂亮 - 关闭.

代替:

$( '#header' ).focus();
or the tempting:
setTimeout( $( '#header' ).focus(), 500 );

试试这个:

setTimeout( function() { $( '#header' ).focus() }, 500 );

在我的代码中,测试传递参数,这不起作用,超时被忽略:

setTimeout( alert( 'Hello, '+name ), 1000 );

这工作,超时滴答:

setTimeout( function() { alert( 'Hello, '+name ) }, 1000 );

很糟糕,w3schools没有提到它.

积分转到:makemineatriple.com.

希望这有助于有人来到这里.

Martas