Question

I am using twitter bootstrap collaspe function. the li elements are as below and the each of the tab content consist of a input element of class .attrInputs

When I click on the element of class pill, I want the input element in each tab to focus so that user dont need to click the input element. I add some jquery to do this using the .focus when class of .pill is clicked on, but its only possible on the second click not the first click.

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

My tab content. The html is the same for every tab

<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(); 
});

Thanks in advance

Answer 1

You can try:

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

setTimeout() will break the chain of click handlers.

For more information, see https://github.com/twitter/bootstrap/issues/2380