動的に追加された要素で Fancybox を使用するにはどうすればよいですか?

動的に追加された要素への Fancybox のバインド

ドキュメントに動的に追加される要素を含む Fancybox v1.3.4 を使用すると、問題が発生する可能性があります。これは、Fancybox が静的要素のみにバインドするためです。

解決策:

ステップ 1: jQuery v1.7.x にアップグレードする

このバージョンには、動的に追加されたイベントをバインドできる .on() メソッドが含まれています。 elements.

ステップ 2: .on() と Eventin のフォーカスを使用します

.on() メソッドをファンシーボックス要素の親要素にバインドします。 focusin イベントは、Fancybox が親コンテナのフォーカス内の要素にのみバインドされるようにするために使用されます。

たとえば、Fancybox 要素のクラスが「ajaxFancyBox」で、ID が「container」のコンテナ内にある場合":

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

このメソッドは、さまざまなタイプの異なる Fancybox オプションの指定もサポートしていますcontent:

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

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

Chrome に関する重要な注意事項:

Chrome では、on() メソッドを機能させるには、Fancybox にバインドされているすべての要素に tabindex 属性を追加する必要があります。 :

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

このソリューションは、新しいコンテンツの追加と既存のコンテンツの置換の両方に機能します。 .on() メソッドが適用されるコンテナ内に新しいコンテンツが追加されていることを確認してください。

以上が動的に追加された要素で Fancybox を使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。