17

ho il seguente codice HTML:evento Click in bootstrap 3 schede

<div id="channels"> 
    <ul class="nav nav-tabs" id="ul-channels"> 
     <li class="channel" data-roomid="lobby"><a class="link-channel" href="#lobby" data-toggle="tab">lobby</a></li> 
     <li class="channel active selected" data-roomid="test"><a class="link-channel" href="#test" data-toggle="tab">test</a></li> 
    </ul> 
</div> 

ho bisogno di un evento che si verifica quando si passa schede. Mi piace questo:

$('.nav-tabs a').click(function (e) { 
    alert("Q"); 
}); 

Ho provato un sacco di opzioni, ma non ho avuto successo. Apprezzerò qualsiasi aiuto.

+5

Prova '$ ('nav-tabs ') si legano (' click', function (e) {...});' e non dimenticate il DOM gestore pronto – karthikr

+0

@karthikr, grazie, è un lavoro! – Denis

+1

* "A partire da jQuery 1.7, il metodo .on() è il metodo preferito per il collegamento di gestori di eventi a un documento." * Da http://api.jquery.com/bind/ – DanFromGermany

risposta

41

La finale la mia soluzione:.

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) { 
    console.log(e.target) // activated tab 
}) 
+0

Come posso modificare questo codice, quindi che mentre su un [data-toggle = "tab"]: l'ultimo evento si attiva, ma se su qualsiasi altra scheda viene fatto un evento diverso. –

+1

@Greg L, penso che dovremmo provare questo: $ (documento). On ('shown.bs.tab', 'a [data-toggle = "scheda"]: last', function (e) { console.log (e.target) // scheda attiva }) $ (documento). on ('shown.bs.tab', 'a [data-toggle = "scheda"]: not (: last)' , funzione (e) { console.log (e.target) // scheda attiva }) – Denis

+0

Buona. Ma come faccio a ricevere un evento anche se si fa di nuovo clic sulla scheda attualmente aperta? – Bryce