Wie verwende ich Fancybox mit dynamisch hinzugefügten Elementen?

Fancybox an dynamisch hinzugefügte Elemente binden

Bei der Verwendung von Fancybox v1.3.4 können Probleme mit Elementen auftreten, die dem Dokument dynamisch hinzugefügt werden. Dies liegt daran, dass Fancybox nur an statische Elemente bindet.

Lösung:

Schritt 1: Upgrade auf jQuery v1.7.x

Diese Version enthält die .on()-Methode, mit der Sie Ereignisse an dynamisch hinzugefügte Elemente binden können.

Schritt 2: Verwenden Sie .on() und das focusin-Ereignis

Binden Sie die .on()-Methode an das übergeordnete Element Ihrer Fancybox-Elemente. Das focusin-Ereignis wird verwendet, um sicherzustellen, dass Fancybox nur an Elemente im Fokus des übergeordneten Containers bindet.

Zum Beispiel, wenn Ihre Fancybox-Elemente die Klasse „ajaxFancyBox“ haben und sich in einem Container mit der ID „container ":

$("#container").on("focusin", function() {
  $("a.ajaxFancyBox").fancybox({
    // Set your Fancybox options here
  });
});

Diese Methode unterstützt auch die Angabe verschiedener Fancybox-Optionen für verschiedene Arten von Inhalten:

$("#container").on("focusin", function() {
  $("a.ajaxFancyBox").fancybox({
    // Ajax options
  });

  $("a.iframeFancyBox").fancybox({
    // Iframe options
  });
});

Wichtiger Hinweis für Chrome:

In Chrome ist das Hinzufügen von Tabindex-Attributen zu allen an Fancybox gebundenen Elementen erforderlich, damit die on()-Methode funktioniert:

<a tabindex="1" class="ajaxFancyBox" href="image01.jpg">...</a>
<a tabindex="1" class="ajaxFancyBox" href="image02.jpg">...</a>

Diese Lösung funktioniert sowohl zum Anhängen neuer Inhalte als auch zum Ersetzen vorhandener Inhalte. Stellen Sie sicher, dass neue Inhalte innerhalb des Containers hinzugefügt werden, in dem die .on()-Methode angewendet wird.

Das obige ist der detaillierte Inhalt vonWie verwende ich Fancybox mit dynamisch hinzugefügten Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!