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

What is the proper method to set the focus to a specific field within a dynamically loaded DIV?

将焦点设置为动态加载的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

The following HTML is fetched into the display DIV:

将以下HTML提取到显示DIV中：

<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>

Many, many thanks!

非常感谢！

10 个解决方案

#1

The load() function is an asynchronous function. You should set the focus after the load() call finishes, that is in the callback function of load(), because otherwise the element you are referring to by #header, does not yet exist. For example:

load（）函数是一个异步函数。您应该在load（）调用完成后设置焦点，即在load（）的回调函数中，因为否则您通过#header引用的元素尚不存在。例如：

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

I had issues myself even with this solution, so i did a setTimeout in the callback and set the focus in the timeout to make /really/ sure the element exists.

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

#2

Have you tried simply selecting by Id?

您是否尝试过按Id选择？

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

Seeing as Ids should be unique, there's no need to have a more specific selector.

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

#3

Yes, this happens when manipulating an element which doesn't exist yet (a few contributors here also made a good point with the unique ID). I ran into a similar issue. I also need to pass an argument to the function manipulating the element soon to be rendered.

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

The solution checked off here didn't help me. Finally I found one that worked right out of the box. And it's very pretty, too - closures.

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

Instead of:

代替：

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

Try this:

尝试这个：

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

In my code, testing passing the argument, this didn't work, the timeout was ignored:

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

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

This works, the timeout ticks:

这工作，超时滴答：

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

It sucks that w3schools doesn't mention it.

很糟糕，w3schools没有提到它。

Credits go to: makemineatriple.com.

积分转到：makemineatriple.com。

Hopefully, this helps somebody who comes here.

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

Martas

#4

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

i tried it but it doesn't work, please give me more advice to resolve this problem. thanks for your help

我试过但它不起作用，请给我更多的建议来解决这个问题。谢谢你的帮助

#5

如果

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

is not working then is there another element on your page with the id of header?

没有工作，那么你的页面上有另一个元素的标题？

Use firebug to run $("#header") and see what it returns.

使用firebug运行$（“＃header”）并查看它返回的内容。

#6

As Omu pointed out, you must set the focus in a document ready function. jQuery provides it for you. And do select on an id. For example, if you have a login page:

正如Omu指出的那样，您必须将焦点设置在文档就绪功能中。 jQuery为您提供。并选择id。例如，如果您有登录页面：

$(function() { $("#login-user-name").focus(); }); // jQuery rocks!

#7

This runs on page load.

这在页面加载时运行。

<script type="text/javascript">
    $(function () {
        $("#header").focus();
    });
</script>

#8

Dynamically added items have to be added to the DOM... clone().append() adds it to the DOM... which allows it to be selected via jquery.

必须将动态添加的项添加到DOM ... clone（）。append（）将其添加到DOM ...这允许通过jquery选择它。

#9

$("#header").attr('tabindex', -1).focus();

#10

$(function (){
    $('body').on('keypress','.sobitie_snses input',function(e){
        if(e.keyCode==13){
            $(this).blur();
            var new_fild =  $(this).clone().val('');
            $(this).parent().append(new_fild);
            $(new_fild).focus();
        }
    });
});

most of error are because U use wrong object to set the prorepty or function. Use console.log(new_fild); to see to what object U try to set the prorepty or function.

大多数错误都是因为U使用错误的对象来设置prorepty或函数。使用console.log（new_fild）;看看你试图设置prorepty或函数的对象。

#1