Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using Bootstrap Dropdown - Focus Input via Jquery

I am using the code below which is part of Bootstrap Framework.

My goal is to focus the input if click on <a>name</a> via Jquery's click/focus functionality. I already know its about the data-toggle="dropdown" attribute in the a link make it doesnt work. I am not really experienced. Hopefully anybody got some help for me!

<html>
<body>
<li class="dropdown">
<a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="#"><i class="icon-user"></i> name </a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>
<form ...>                                      
<input type="text" id="4711" /> 
</form>
</li>
</ul>
</li>
</body>
</html>



<script>
$('#dLabel').click(function() {
  $('#4711').focus();
});
</script>
like image 632
nhoyer Avatar asked May 13 '13 14:05

nhoyer


1 Answers

You should put your code in document ready handler:

{for bootstrap, you could use a timeout as a simple workaround}

SEE DEMO

$(function () {
    $('#dLabel').click(function () {
        setTimeout(function(){$('#login').focus();},0);
    });
    $('.dropdown input[type=text]').click(function(e){
        e.stopPropagation();
    });
});
like image 111
A. Wolff Avatar answered Oct 31 '22 06:10

A. Wolff