Solución:
Los eventos de la pestaña Bootstrap se basan en .nav-tabs elementos, no el .tab-content elementos. Entonces, para aprovechar el evento del espectáculo, necesita el elemento con un href que apunta hacia #tab1, no la #tab1 elemento de contenido en sí.
Entonces en lugar de esto:
$('#tab1').on('shown.bs.tab', function (e) {
console.log("tab1");
});
Haz esto en su lugar:
$('[href=#tab1]').on('shown.bs.tab', function (e) {
console.log("tab1");
});
O, para capturarlos todos, simplemente haga esto:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log(e.target.href);
})
Demostración en fragmentos de pila
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log(e.target.href);
})<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a id="tab1" href="#chart1" role="tab" data-toggle="tab">Tab 1</a></li>
<li><a id="tab2" href="#chart2" role="tab" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="chart1">Tab 1 Content</div>
<div class="tab-pane" id="chart2">Tabe 2 Content</div>
</div>
</div>Si la pestaña es dinámica de todos modos, intente usar
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
alert(e.target.href);
})
En mi caso, hubo un conflicto entre Jquery y Bootstrap.
Resolví el problema con jQuery.noConflict (). ¡Vea abajo!
¡Espero que eso ayude!
// Issue @ tabs toggle
jQuery.noConflict();
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
alert(e.target.href);
});
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)