如果我像这样使用jQuery focus()方法似乎不起作用：
$('#<same_id_input>').focus();
单击标签时，我调用一个函数来显示一个带有输入的div，然后我调用focus()元素上的<input>，但它不起作用。
我正在使用： Boostrap 3.3.7 + jQuery 3.1.1
$('#optBusqueda .btn').click(function(){
var radioSeleccionado=$(this).find(':radio').first();
if(radioSeleccionado && radioSeleccionado.length>0){
$('#divBuscarOcr').css("display","none");
$('#divBuscarNombre').css("display","none");
$('#divBuscarRfc').css("display","none");
$('#divBuscarCurp').css("display","none");
var idRadioSeleccionado=radioSeleccionado.attr('id');
switch(idRadioSeleccionado){
case "radioBuscarOcr":
$('#divBuscarOcr').css("display","block");
$('#txtBuscarOcr').focus();
break;
case "radioBuscarNombre":
$('#divBuscarNombre').css("display","block");
$('#divBuscarNombre').focus();
break;
case "radioBuscarRfc":
$('#divBuscarRfc').css("display","block");
$('#divBuscarRfc').focus();
break;
case "radioBuscarCurp":
$('#divBuscarCurp').css("display","block");
$('#divBuscarCurp').focus();
break;
}
}
});<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="panel-group" id="accordion" role="tablist"
aria-multiselectable="true">
<div id="panelBuscar" class="panel panel-default">
<div class="panel-heading clearfix" role="tab" id="headingOne">
<!-- data-toggle="collapse" data-target="#collapseOne" -->
<h4 class="panel-title pull-left" style="padding-top: 7.5px;">
<a role="button" data-toggle="collapse" data-parent="#accordion"
href="#collapseOne" aria-expanded="false"
aria-controls="collapseOne"> <i
class="fa fa-lg fa-fw fa-search"></i> BUSCAR
</a>
</h4>
<div id="optBusqueda" class="btn-group pull-right"
data-toggle="buttons">
<label class="btn btn-primary active" data-toggle="tooltip" title="Buscar por OCR"> <input
name="options" id="radioBuscarOcr" type="radio" checked="true" />
OCR
</label> <label class="btn btn-primary" data-toggle="tooltip" title="Buscar por Nombre"> <input name="options"
id="radioBuscarNombre" type="radio" /> NOMBRE
</label> <label class="btn btn-primary" data-toggle="tooltip" title="Buscar por RFC"> <input name="options"
id="radioBuscarRfc" type="radio" /> RFC
</label> <label class="btn btn-primary" data-toggle="tooltip" title="Buscar por CURP"> <input name="options"
id="radioBuscarCurp" type="radio" /> CURP
</label>
</div>
<div class="pull-right" id="divMunicipioBuscar">
<div class="form-group" style="margin-bottom: 0">
<select id="txtNoMunicipioBuscar" name="txtNoMunicipioBuscar"
th:attr="data-url=@{/municipios/get},data-emptyText='Seleccione municipio'"
class="form-control populateSelect">
<option value="">Seleccione municipio...</option>
</select>
</div>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse in"
role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="row">
<div class="col-sm-4 " id="divBuscarOcr">
<div class="form-group">
<input id="txtBuscarOcr" name="txtBuscarOcr" type="text"
class="form-control" placeholder="Ocr" />
</div>
</div>
<div id="divBuscarNombre" style="display: none;">
<div class="col-sm-3">
<div class="form-group">
<input id="txtNombreBuscar" name="txtNombreBuscar" type="text"
class="form-control" placeholder="Nombre" />
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<input id="txtApPaternoBuscar" name="txtApPaternoBuscar"
type="text" class="form-control" placeholder="Apellido Pat." />
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<input id="txtApMaternoBuscar" name="txtApMaternoBuscar"
type="text" class="form-control" placeholder="Apellido Mat." />
</div>
</div>
</div>
<div id="divBuscarRfc" style="display: none;">
<div class="col-sm-4 ">
<div class="form-group">
<input id="txtBuscarRfc" name="txtBuscarRfc" type="text"
class="form-control" placeholder="Rfc" />
</div>
</div>
</div>
<div id="divBuscarCurp" style="display: none;">
<div class="col-sm-4 ">
<div class="form-group">
<input id="txtBuscarCurp" name="txtBuscarCurp" type="text"
class="form-control" placeholder="Curp" />
</div>
</div>
</div>
<a id="btnBuscar" class="btn btn-default"
onclick="busquedaCiudadano(this)"><i
class="fa fa-lg fa-search"></i> Buscar</a>
</div>
<div id="divResultados"></div>
</div>
</div>
</div>
</div>
这是我在JSFiddle上的原始示例。
答案 0 :(得分：0)
这似乎是由于使用Twitter Bootstrap切换按钮造成的。他们可能会在自己的功能中调用focus()，这会混淆你在元素上放置的focus()。
您可以在结尾处拨打event.stopPropagation()，但这会完全阻止传播的事件发生，这将导致切换按钮不显示为已选中。
您可以通过自己设置所选状态的样式来解决这个问题：
$('.btn').on('click', function(){
$('#InputToFocus').focus();
$(this).parent('.btn-group').find('.btn').removeClass('active');
$(this).addClass('active');
return false; // Equivalent to preventDefault/stopPropagation
});<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons">
<label for="radio1" class="btn btn-primary">
<input type="radio" id="radio1" name="radio" />
Radio 1
</label>
<label for="radio2" class="btn btn-primary">
<input type="radio" id="radio2" name="radio" checked />
Radio 2
</label>
</div>
<input id="InputToFocus" type="text">
正如您所看到的，这使得能够专注于元素并正确地对元素进行样式化，尽管可能会产生其他后果。
另一种方法是在处理事件后调用您的处理程序。最简单的方法是使用setTimeout()。
$('.btn').on('click', function(){
setTimeout(function() { // Hack to make sure the focus is called after the event has been handled
$('#InputToFocus').focus();
});
});<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons">
<label for="radio1" class="btn btn-primary">
<input type="radio" id="radio1" name="radio" />
Radio 1
</label>
<label for="radio2" class="btn btn-primary">
<input type="radio" id="radio2" name="radio" checked />
Radio 2
</label>
</div>
<input id="InputToFocus" type="text">