JQuery Ajax Antwort ThickBox Verwendung

Question

So habe ich ein Ajax-Aufruf zu einem Dienst (mit JQuery), die gültige HTML zurückgibt:

<table class='datagrid' style='width: 600px; text-align:left'>
<tr><th>User</th><th>Full Name</th><th>Company</th><th>New Prints</th><th>Reprints</th></tr><tr>
<td>
<a class='thickbox' href='UserSessionReportPopup.aspx?user=1&start=9/2/2009&end=9/30/2009&TB_iframe=true&height=450&width=700'>carbon</a>

</td><td>Carbon County</td>
<td></td>
<td>5</td>
<td>4</td>
</tr>
</table>

Diese Rückkehr html wird korrekt und auf der Seite angezeigt zugewiesen, aber wenn ich auf die Schaltfläche „a“ eine neue Seite markieren anstelle eines „ThickBox“ mit dem iFrame Inhalt geöffnet wird.

Hier ist der verwirrende Teil, wenn ich diesen Code in die Seite kopieren und dann im Browser ausgeführt es die richtige Art und Weise wirkt (Anzeige des thickbox Artikel)

Warum wird die AJAX-Antwort nicht korrekt ThickBox Artikel angezeigt werden?

Meine Vermutung ist, dass der class = ‚thickbox‘ im Antworttext nicht die JavaScript ist zu finden, die wissen, wie das Element zu analysieren.

Answer 1

Ich denke, das Problem ist, dass diese <a class='thickbox' einfach nicht das Ereignis an sich gebunden haben.

Ich habe genau die gleichen Probleme gehabt, wenn ich bestehende dom Elemente kopiert, die Links enthalten und alle gebundenen Ereignisse gestoppt auf diesen neu geschaffenen Elemente arbeiten. alle hatte ich auch auf jene Elemente war zu binden Ereignissen zu tun.

So tun Sie einfach Ihren thickbox Aufruf dieser auch neues Element. Verwenden Sie nicht nur den gleichen Code, den Sie bei $ verwenden (document) .ready. Wenn ich habe so etwas wie, dass die Ereignisse begannen an neuen Elementen zu arbeiten, aber zweimal auf alte Elemente gebrannt.

In Antwort des Kommentars: Ich habe keine Ahnung, wie thickbox funktioniert. Ich habe immer Slimbox bevorzugt. Ich habe einige Beispiel, die Ihnen helfen könnten. Lesen Sie diese (es geht um thickbox): http://15daysofjquery.com/jquery-lightbox/19/

Grundsätzlich, wenn Seite geladen wird durchgeführt, diese Funktion ausgelöst:

function TB_init(){

    $("a.thickbox").click(function(){

    var t = this.title || this.innerHTML || this.href;

    TB_show(t,this.href);

    this.blur();

    return false;

    });

jetzt alle ein Schlüssel Klasse thickbox werden die Sachen Link verweist in thickbox Fenster öffnen. Wenn neue a-Elemente auf der Seite hinzugefügt werden, haben sie dieses Ereignis nicht an sich gebunden, so dass nach der Ajax-Magie zu tun und zieht, dass neue Inhalte aus irgendwo, müssen Sie diesen $ binden ( „a.thickbox“). Klicke (function () {auf den neuen Link zu. so fügen Sie einfach so etwas wie

$(newlinkselector).click(function{ etc.. etc.. 

im Skript direkt nach dem Ort, den Sie das Zeug machen, dass Ajax-Aufruf gibt zurück zu Ihnen.

Answer 2

Sie können auch folgende Skript innerhalb Ajax Antwort setzen:

<script type="text/javascript">
    self.parent.tb_init('a.thickbox, area.thickbox, input.thickbox');
</script>

Es wird dick Box für jedes Mal initialisiert, wenn Ajax-Antwort kommen.

Answer 3

Ich hatte das gleiche Problem. Die schnelle Antwort - fügen Sie die folgende Zeile, nachdem Sie die Innerhtml füllen: tb_init ( 'a.thickbox'); // wieder initialisieren

Diese Wieder initialisiert den Ereignishandler für den Anker-Tag. Arbeitete wie ein Charme für mich ...

Answer 4

Ersetzen tb_init () mit folgenden:

   function tb_init(domChunk){
    $(domChunk).live("click", function(){
    var t = this.title || this.name || null;
    var a = this.href || this.alt;
    var g = this.rel || false;
    tb_show(t,a,g);
    this.blur();
    return false;
    });
}

Dies bindet das Click-Ereignis mit einer jQuery-Methode Live, die dynamisch generierte Inhalte berücksichtigt.