jQuery: Probleme mit eq()
johny7
- javascript
0 LX
Moin allerseits,
Ich quäle mich gerade mit Tabs in jQuery von jQueryTools herum.
Ich habe eine eigen Löschfunktion hinzugefügt.
Nach dem löschen eines Tabs muss ja ein anderes angezeigt werden. Wenn ein Tab gelöscht wird, welches nicht gerade angezeigt wird, bleibt das angezeigte aktiv. Sonst muss der Tab rechts oder links vom gelöschten Tab angezeigt werden, damit nicht immer auf den ersten Tab umgesprungen wird.
Ich habe folgende Struktur für die Tabs:
<div class="tabbox ui-tabs ui-widget ui-corner-all">
<ul class="tabs ui-tabs ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li id="tab-summ" class="ui-state-default ui-corner-top" style="width: 140px;"><a href="#" class="">Summary</a><img src="includes/img/ico_close.gif" alt="" class="tabclose"></li><li id="tab-links" class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active" style="width: 140px;"><a href="#" class="current">Links</a><img src="includes/img/ico_close.gif" alt="" class="tabclose"></li></ul>
</div>
Dazu habe ich folgende Event-Behandlung:
$("ul.tabs > li > a").bind('click',
function ()
{
// a -> li -> ul
$(this).parent().parent().data("activeTab", $(this).parent().attr("ID"));
});
D.h. im ul-Tag wird gespeichert, welcher Tab aktiv ist. Das erfolgt bei jedem Klick auf einen Eintrag.
Die close-icons haben folgende Aktion:
// Lösche die Tabs
// Speichere in nextCurrentTab entweder den Index oder den Namen des Tabs, der anschließend angeklickt werden soll
// Wenn aktiver Tab gelöscht wurde
if (closeActive)
{
// Klicke den Tab mit dem vorher ermittelten Index an
$(".tabs > li > a").eq(nextCurrentTab).trigger($.Event("click"));
} else
{
// Klicke den Tab mit dem vorher ermittelten Namen an
$(".tabs #" + nextCurrentTab + " > a").trigger($.Event("click"));
}
Das Komische nun ist: Der Tab wird in beiden Fällen korrekt angeklickt (sehe ich daran, dass er angezeigt wird). Aber im ersten Fall, d.h. dort wo der Tab per index ermittelt wird, springt die oben angeführte Funktion nicht an. Wie kann das sein? Ein event-Helper registriert den Klick (und zeigt den Tab korrekt an) und ein anderer merkt nichts von dem Klick und speichert folglich nichts in den UL-Tag?
Ich habe auch schon versucht in der Funktion einfach nur $(this).html() aus zu geben, keine Reaktion.
Ich fasse zusammen:
Wenn ich einen Klick mit $(".tabs #" + nextCurrentTab + " > a").trigger($.Event("click")); triggere, wird er von der Tab-Funktion und von meiner Speichern-Funktion registriert.
Wenn ich ihn aber mit $(".tabs > li > a").eq(nextCurrentTab).trigger($.Event("click")); triggere, wird er nur von der Tab-Funktion, nicht aber von meiner oben deklarierten Funktion registriert.
Vielen Dank im Voraus für eure Mühe
Grüße, JN
Lasse Dir doch mal den Index anzeigen. Ich würde mal raten, dass der Fehler an dieser Stelle hängt. Ansonsten schicke uns mal die URL der entsprechenden Seite samt aller Scripte, damit wir das vernünftig debuggen können.
Übrigens bietet es sich an, einen Zustand wie "aktiv" in einer Klasse zu speichern, nicht im data-Objekt des darüberliegenden Nodes.
Gruß, LX