jak powiązać fancybox z dynamicznym dodanym elementem?

Question

Używam jquery fancybox 1.3.4 jako pop-form.

ale znalazłem fancybox nie można powiązać z dynamicznie dodanym elementem. na przykład, gdy dodaję element html do bieżącego dokumentu.

tak: pierwszy dołączyć element do wykorzystania ciało jQuery,

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

i wzywam fancybox,

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

ale fancybox nie działają z dynamicznym dodanego elementu.

i nie mogę zadzwonić do fancybox z tego elementu?

Pochodzę z Chin. więc mój angielski jest słaby, proszę, wybacz mi.

Answer 1

Najprostszym sposobem wiązania fancybox (v1.3.x) dynamicznie dodatkowe elementy są:

1: Uaktualnienie do jQuery v1.7.x (jeśli jeszcze nie)

2: Ustaw swój skrypt używając jQuery API on() + zdarzenie focusin.

Aby pracować trzeba znaleźć element parent swoich elementów z class="ajaxFancyBox" wg kodu powyżej (lub parent z parent jak jest to potrzebne) i dołączyć jQuery on() do niego tak na przykład, mając tę ​​html:

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

.. zastosujemy on() i focusin zdarzenie elementu z id="container" (The parent), jak w przykładzie powyżej, jak:

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

Możesz zastosować dowolną opcję Fantombox, jeśli potrzebujesz. Dodatkowo mogą mieć różne scenariusze dla różnych typów treści (wewnątrz metody on()), takich jak:

$("#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 

WAŻNE: powyższy przykład nie będzie działać tak na Chrome. obejście jest dodanie atrybutu tabindex do wszystkich elementów powiązanych z fancybox jak

<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> 

, który rozwiązuje ten problem i będzie działać (o ile wiem) w tym w większości przeglądarek IE7 +.

See my demo page here

UPDATE: 07 marca 2012.

powiedziano mi, że ta metoda działa tylko podczas dodawania nowych treści na stronie, ale nie po wymianie zawartości strony.

Metoda faktycznie działa w jednym z dwóch wymienionych powyżej scenariuszy. Upewnij się tylko, że nowa zastępowana zawartość jest również ładowana do kontenera, w którym zastosowano metodę .on().

See demo

tabindex obejście dla Chrome ma również zastosowanie.

Answer 2

Ty określające złą nazwę klasy, spróbuj zamiast tego:

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

Answer 3

można spróbować coś takiego może:

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

a następnie dokonać funkcję stworzyć i pokazać fancybox:

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

Answer 4

mi odpowiedział na pytanie samo jak tego można znaleźć odpowiedź na

Appending dynamically generated html using jQuery does not play well with Fancybox

Answer 5

Jak sugerowano w powyższym komentarzu, możemy użyć następującego podejścia do tego rodzaju problemów (elementem elementów dynamicznych wiązania) -

$("#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