Twitter bootstrap崩溃专注于输入

时间:2013-02-21 06:26:49

标签: jquery twitter-bootstrap

我正在使用twitter bootstrap collaspe功能。 li元素如下所示,每个tab内容都包含一个类.attrInputs的输入元素

当我点击class pill的元素时,我希望每个标签中的input元素都能聚焦,这样用户就不需要单击input元素了。当点击.pill类时,我使用.focus添加一些jquery来执行此操作,但它仅在第二次单击时才可以,而不是第一次单击。

   <ul class="nav nav-pills">
           <li>
              <a class="pill" href="#a" data-toggle="pill">
                A
              </a>
           </li>
           <li>
               <a class="pill" href="#b" data-toggle="pill">
                B
               </a>
           </li>
    <ul>

我的标签内容。每个标签的html都是相同的

<div class="span10 offset1 tab-pane active" id="collar">
    <div class="span4">
          <input class="attrInputs" name="collar" type="text">
    </div>
    <div class="span4 offset1">
          <img src="http://placehold.it/300x300/156153">
    </div>
</div>

$('.pill').on('click',function(){
   $('.attrInputs').focus(); 
});

提前致谢

1 个答案:

答案 0 :(得分:1)

您可以尝试:

$('.pill').on('click',function(){
   setTimeout(function() {
     $('.attrInputs').focus(); 
   },0);
});

setTimeout()将打破点击处理程序链。

有关详细信息,请参阅https://github.com/twitter/bootstrap/issues/2380