jquery Tab - Open Link im aktuellen Panel funktioniert nicht

Question

Ich habe gerade angefangen, mit den Jquery Ui Tabs zu spielen. Der Inhalt der Tabs besteht zu Beginn hauptsächlich aus statischen Inhalten.

Jetzt haben einige der Inhalte innerhalb der Panels Links zu irgendeiner Art von Subcontent. Wenn der Benutzer auf einen Link im Panel klickt, möchte ich den Inhalt des aktuellen Panels durch den Inhalt des Links ersetzen.

Also habe ich das Skript direkt aus der jquery ui Registerkarte Dokumentation, aber ich kann es nicht zum laufen bringen. Es öffnet den Link immer direkt, nicht innerhalb des Panels. Der Code, den ich zum Testen verwenden ist ganz einfach:

<div id="MyTabs"> 
    <ul> 
     <li><a href="#TestTab1">TestTab</a></li> 
     <li><a href="#TestTab2">TestTab</a></li> 
    </ul> 
    <div id="TestTab1"> 
     Lorem ipsum dolor. dumm di dumm 
     <a href="http://mywebserver/somelink">Test</a> 
    </div> 
    <div id="TestTab2"> 
     Lorem ipsum dolor. dumm di dumm 2 
     <a href="http://mywebserver/somelink2">Test 2</a> 
    </div> 
</div> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#MyTabs').tabs({ 
      load: function(event, ui) { 
       $('a', ui.panel).click(function() { 
        $(ui.panel).load(this.href); 
        return false; 

       }); 
      } 
     }); 
    }); 

Außerdem, wenn ich den Inhalt des Panels habe eine AJAX-Aufruf keine Verbindung innerhalb der Platte auch immer geladen mit arbeitet.

Irgendeine Idee, was ich falsch mache?

Hilfe wirklich

Grüße

Maik

Edit1 geschätzt wird:

OK, habe ich ein bisschen weiter. Ich ersetzte den Javascript mit dem folgenden Ausschnitt:

 $(function() { 
     $("#MyTabs").tabs(); 
     $("#MyTabs").bind('tabsshow', function(event, ui) { 
      AddClickHandler(ui); 
     }); 
    }); 

    function AddClickHandler(ui) { 
     $('a', ui.panel).click(function() { 
      MyAlert("AddClickHandler"); 
      $(ui.panel).load(this.href, AddClickHandler(ui)); 
      return false; 
     }); 
    } 

Nach dieser Änderung alle Links auf einer Platte wird der Inhalt des aktuellen Panel aktualisieren. So weit, ist es gut. Noch ein Problem übrig. Ich kann es nicht für nachfolgende Links arbeiten. Ich habe versucht, es mit dem zweiten "AddClickHandler" für Rückruf zu tun, wenn der Ajax-Anruf beendet ist. Wenn eine andere Funktion mit einer einfachen Warnung angezeigt wird, wurde sie tatsächlich aufgerufen, wenn der Inhalt des Bedienfelds aktualisiert wurde. Aber ich kann nichts an die neuen Links in diesem Inhalt binden. Das "$ ('a', ui.panel) ..." funktioniert nicht. Was wäre der richtige Selektor dafür?

Irgendwelche Hinweise?

Grüße

Maik

Answer 1

das Recht vor, alle aussehen tut ..

das Beispiel sieht wie folgt aus:

<div id="example"> 
    <ul> 
     <li><a href="ahah_1.html"><span>Content 1</span></a></li> 
     <li><a href="ahah_2.html"><span>Content 2</span></a></li> 
     <li><a href="ahah_3.html"><span>Content 3</span></a></li> 
    </ul> 
</div> 

Bekanntmachung sind die Links in den TABs selbst, nicht in der Registerkarte Inhalt

Edi t: Ok, ich denke, ich sehe dein Problem. Ich sehe keinen Code für Sie, um das Öffnen dieser Links in den Tabs zu registrieren. Wenn der Benutzer also auf einen Link klickt, wird er wie ein normaler Link im Browserfenster geöffnet.

versuchen, etwas wie folgt aus:

$("#MyTabs").find("a").click(function(){ 
    $(this).parent(".ui-tabs-panel").load(this.href); 
    return false; 
}); 

Edit2: Ich habe erkannt, dass Ihre "load" -Funktion macht das gleiche wie die Funktion i oben geschrieben habe.Wie auch immer, probiere meine Funktion aus und schau, ob sie funktioniert, wenn sie deine Funktion mit Firebug durchläuft und was anders ist, und wenn sie es nicht tut ... gehe deine Funktion mit Firebug durch ... oder stelle eine Online-Demo zur Verfügung und ich kann sie dir anschauen es

Edit3: Ok hier ist bessere Lösung:

diese Funktion hinzufügen:

var bindAjaxLinks = function(){ 
    $("#MyTabs").find("a").click(function(){ 
     $(this).parent(".ui-tabs-panel").load(this.href, {}, bindAjaxLinks); 
     return false; 
    }); 
} 

//in the tabs constructor add the select function: 

$("#MyTabs").tabs({select: function(event, ui) { 
    bindAjaxLinks(); 
    }, 
    //your other stuff 
} 

wahrscheinlich nicht die beste Lösung, da es jedes Mal, wenn eine der Klick-Funktion für alle Links rebind wird Link ist geöffnet. aber wahrscheinlich ok für jetzt, es sei denn, Sie bauen eine Produktionsstätte

Answer 2

Sie können live() verwenden, wie folgt:

$("#myTabs").tabs({ 
     load: function(event, ui) { 
     $("#myTabs").find("a").live('click', function() { 
     $(ui.panel).load(this.href); 
     return false; 
    }); 
}})