jquery - Twitter Bootstrap 下拉输入字段无法使用 focus() 方法

Question

我在关注登录下拉列表中的第一个输入字段时遇到问题。我正在使用 jquery 1.7.2 和 bootstrap 2.1.1，仅使用模态和下拉功能。它们都工作得很好，我通过数据目标而不是 JS 调用下拉菜单和模式。

我已经尝试了几个小时并到处寻找答案，但我找不到一种方法让我的第一个输入字段(#j_username)在显示下拉列表时获得焦点。

Bootstrap 中显示的事件不会触发，因此我执行了一个 jQuery on() 事件，该事件触发得很好。我的选择器工作正常，我已经在控制台中使用其他方法(hide() 和 show())以及选择同一字段(其 id #j_username)或 ($("#fields input:first ”)。

事件正确触发，但无法让输入字段获得焦点。我已经尝试过 HTML5 的自动对焦属性，但它似乎也不起作用。

有什么想法吗？提前致谢

该处理程序是函数 onPageReady() 的一部分。

$("#loginlnk").on('click', function(){
console.log("FIRE");
$("#j_username").focus();
});

<span class="span-dropdown">
    <button class="dropdown-toggle btn grey" role="button" id="loginlnk" data-toggle="dropdown" href='#'>Login</button>
    <div class="dropdown-menu auth" role="menu" id="signin" aria-labelledby="loginlnk">
    <form-login action="/j_spring_security_check" method="POST" always-use-default-target='false'  default-target-url="/home.do" authentication-failure-url="/welcome.do" />
    <div class="dropdown-caret right">
        <span class="caret-outer"></span>
        <span class="caret-inner"></span>
    </div>
    <div id="fields">   
         <div id="username">Enter your email address
         <input class="inputs login" autofocus="autofocus" id="j_username" name="j_username">
          </div>
          <div id="password">Password
          <input class="inputs login" id ="j_password" name="j_password" type="password" >
          </div>
     </div>
     <div id="submit">
        <button class="btn mapit" id="signinbtn" type="submit" value="Login" onClick="login(1)" tabindex="102">Login</button>
    </div>
    <div id="links">
        <a id="pwdlnk" href="javascript:lostPwd();">Lost your password?</a>         
    </div> 
    <div id="lostpwd">
        Enter your email to receive recovery instructions.
        <div class="container">
        <input class="inputs login" type="email" id="lost_username" tabindex="400">
        <button class="btn" id="lostpwdbtn" type="submit" value="" onClick="forgotPassword()" tabindex="401">Recover</button>
        </div>
    </div>                  
 </form-login>

Answer 1

当单击事件被触发时，表单尚未呈现。还有no plans to add such events to Bootstrap dropdowns .

解决这个问题的快速方法是:

$("#loginlnk").on('click', function(){
    console.log("FIRE");
    var x = setTimeout('$("#j_username").focus()', 700);
});