0

I'm trying to fire Fancybox on elements which I append with jQuery, but with no success.

Here the Fancybox firing code:

jQuery(document).ready(function() {
    $("a#what_is_prehung").fancybox();
    $("a.prehungHelp").fancybox();
});

With this code I'm appending html markup:

jQuery(document).ready(function($) {
     $('.valueDoorSlabonly').append('<div id="prehungHelp"><a class="prehungHelp" href="/template/images/door-slab-only.jpg"></a></div>');
});

I need to fire Fancybox on elements with class="prehungHelp". On our site we are using jQuery v1.6.4 and there is no way to update it due to other scripts working with this version only.

http://www.doorsandbeyond.com/avanti-modern-interior-door-black-apricot/ this is page where it should appear, in form with door option in "* Pre-hanging:" section right after radio buttons should "?" mark appear with link to modal window (fancybox) which is describing this option.

I've tried this answers and some others from several resources, but with no success: how to bind fancybox to dynamic added element? Appending dynamically generated html using jQuery does not play well with Fancybox

I'll appreciate any help. Thanks Sharif

Community
  • 1
  • 1
Sharif
  • 343
  • 3
  • 12
  • Are you only appending a.pregungHelp elements to the DOM once? Are you sure that they are being appended before you call your fancybox setup code? – Spencer Alger Feb 27 '13 at 15:20
  • As an aside, there's no need to prepend the tag with the selector when using IDs - they should be unique anyway. – BenM Feb 27 '13 at 15:23
  • yes, they appended and appears on page, but link is not nandled by Fancybox. It just opens image in new window. – Sharif Feb 27 '13 at 15:24

1 Answers1

0

Try to call fancybox after you append "prehungHelp" element with jQuery

jQuery(document).ready(function($) {
    $('.valueDoorSlabonly').append('<div id="prehungHelp"><a class="prehungHelp" href="/template/images/door-slab-only.jpg"></a></div>');
    $("a.prehungHelp").fancybox();
});
Guern
  • 1,237
  • 1
  • 12
  • 30
  • Ooo )) It works! It was so simple. Thank you so much! I really appreciated. I simply didn't guess to call it after append. – Sharif Feb 27 '13 at 15:36
  • I am happy if it works. Just remember to vote up my answer if you found it useful. – Guern Feb 27 '13 at 16:57