web-dev-qa-db-ja.com

fancyboxを動的に追加された要素にバインドする方法は？

ポップフォームとしてjqueryfancybox1.3.4を使用しています。

しかし、fancyboxは動的に追加された要素にバインドできないことがわかりました。たとえば、現在のドキュメントにhtml要素を追加する場合です。

このように：最初に要素をbody usejqueryに追加します。

  $(document.body).append("<a href="home/index" class="fancybox"/>");

そして私はfancyboxと呼んでいます

  $(".ajaxFancyBox").fancybox({padding: 0});

ただし、fancyboxは動的に追加された要素では機能しません。

この要素からfancyboxを呼び出すことはできませんか？

javascriptjqueryfancybox
12
caochao

Fancybox（v1.3.x）を動的に追加された要素にバインドする最も簡単な方法は次のとおりです。

1：jQuery v1.7.xにアップグレードします（まだアップグレードしていない場合）

2： jQuery API on() + focusinイベントを使用してスクリプトを設定します。

それを機能させるには、上記のコードに従って_class="ajaxFancyBox"_で要素のparent要素を見つける必要があります（または必要に応じてparentのparentを見つける必要がありますit）そしてjQuery on()をそれに添付します。

_<div id="container">
 <a class="ajaxFancyBox" href="image01.jpg">open image 01</a>
 <a class="ajaxFancyBox" href="image02.jpg">open image 02</a>
</div>
_

..上記の例のように、on()およびfocusinイベントを_id="container"_（parent）の要素に適用します。

_$("#container").on("focusin", function(){
 $("a.ajaxFancyBox").fancybox({
  // fancybox API options here
  'padding': 0
 }); // fancybox
}); // on
_

必要に応じて、任意のfancyboxオプションを適用できます。さらに、次のように、コンテンツのタイプごとに（on()メソッド内に）異なるスクリプトがある場合があります。

_$("#container").on("focusin", function(){
 $("a.ajaxFancyBox").fancybox({
  // fancybox API options here
  'padding': 0
 }); // fancybox
 $("a.iframeFancyBox").fancybox({
  // fancybox API options here
  'padding': 0,
  'width': 640,
  'height': 320,
  'type': 'iframe'
 }); // fancybox
}); // on
_

[〜＃〜]重要[〜＃〜]：上記の例はChromeではそのようには機能しません。 回避策は、fancyboxにバインドされているすべての要素にtabindex属性を追加することです。

_<div id="container">
 <a tabindex="1" class="ajaxFancyBox" href="image01.jpg">open image 01</a>
 <a tabindex="1" class="ajaxFancyBox" href="image02.jpg">open image 02</a>
</div>
_

これは問題を解決し、IE7 +を含むほとんどのブラウザで（私が知る限り）機能します。

ここで私のデモページを参照してください

更新：2012年3月7日

この方法は、ページに新しいコンテンツを追加した場合にのみ機能し、ページのコンテンツを置き換えた場合には機能しないと言われました。

この方法は、実際には上記の2つのシナリオのいずれかで機能します。 .on()メソッドを適用したコンテナ内にも新しい置換コンテンツがロードされていることを確認してください。

デモを参照

Chromeのtabindex回避策も適用されます。

26
JFK

間違ったクラス名を指定しているので、代わりにこれを試してください。

$(".fancybox").fancybox({padding: 0});
1
Russ Ferri

あなたは多分このような何かを試すことができます：

 $(document.body).append("<a href='home/index' class='fancybox' onclick='showFancybox()'/>");

次に、Fancyboxを作成して表示する関数を作成します。

function showFancybox(){
    $.fancybox(
            '<h2>Hi!</h2><p>Content of popup</p>',
            {
                    'autoDimensions'    : false,
                'width'             : 350,
                'height'            : 'auto',
                'transitionIn'      : 'none',
                'transitionOut'     : 'none'
            }
        );
}
1
zgood

上記のコメントで示唆されているように、この種の問題では次のアプローチを使用できます（要素を動的要素にバインドする）-

$("#container").on("focusin", function(){

    if($(this).hasClass("fancybox-bind")){                //check if custom class exist 
       return 0;                                          //now fancybox event will not be binded
    }else{                                                //add class to container
        $(this).addClass("fancybox-bind");
    }

    $("a.ajaxFancyBox").fancybox({                        // fancybox API options here
        'padding': 0
    }); // fancybox

   $("a.iframeFancyBox").fancybox({                       // fancybox API options here
     'padding': 0,
     'width': 640,
     'height': 320,
     'type': 'iframe'
   }); // fancybox
}); // on
0
Dr_Dang