17

Ich habe folgende HTML:Click-Ereignis in Bootstrap 3 Tabs

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

ich ein Ereignis benötigen, das auftritt, wenn Registerkarten wechseln. Gefällt mir:

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

Ich habe viele Optionen ausprobiert, aber ich hatte keinen Erfolg. Ich werde jede Hilfe schätzen.

+5

Try '$ ('nav-tabs ') bind (' click', function (e) {...});' und vergessen Sie nicht das DOM bereit Handler – karthikr

+0

@karthikr, danke, es ist Arbeit! – Denis

+1

* "Ab jQuery 1.7 ist die .on() -Methode die bevorzugte Methode zum Anhängen von Ereignishandlern an ein Dokument." * Von http://api.jquery.com/bind/ – DanFromGermany

Antwort

41

Die endgültige meine Lösung.

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

Wie kann ich diesen Code ändern, also während auf einem [data-toggle = "tab"]: das letzte Ereignis ausgelöst wird, aber wenn auf anderen Registerkarten ein anderes Ereignis eintritt. –

+1

@Greg L, ich denke, wir sollten dies versuchen: $ (Dokument) .on ('gezeigt.bs.tab', 'a [Daten-Toggle = "Registerkarte"]: letzte', Funktion (e) { console.log (e.target) // aktivierter Tab }) $ (Dokument) .on ('showed.bs.tab', 'a [data-toggle = "tab"]: nicht (: last)' , Funktion (e) { console.log (e.target) // aktivierter Tab }) – Denis

+0

Gut. Aber wie bekomme ich auch ein Event, wenn der aktuell geöffnete Tab erneut geklickt wird? – Bryce