Fancybox не работает с контентом, загруженным вызовом ajax

Question

На страницах коллекции реализован quickshop с использованием fancybox, и теперь реализована дополнительная функциональность, которая работает нормально, и при прокрутке продуктов следующая страница успешно добавляется.

Проблемы новые продукты, которые встраиваются в эти быстрые просмотры, не работают.

код ниже

$(".quick_shop").fancybox({
        width: modal_width,
        height: 'auto',
        autoSize: false,
        padding: [20, 20, 20, 20],
        afterShow: function(e) {
          var selector = $('.fancybox-opened').find('.selector-wrapper select');
          selector.trigger('change');
        },
        beforeShow: function(e) {

          var $gallery = $('.' + $(this.element).data('gallery'));
          var $product = $(this.element).data("fancybox-href");
          var thumbnailPosition = $gallery.parents('.product_section').data('thumbnail');
          var slideshowAnimation = $gallery.parents('.product_section').data('slideshow-animation');
          var slideshowSpeed = $gallery.parents('.product_section').data('slideshow-speed');

          $gallery.flexslider({
            startAt: parseInt($('.featured_image', $(this)).data('index'), 10),
            touch: true,
            pauseOnHover: true,
            controlNav: thumbnailPosition == "no-thumbnails" ? false : "thumbnails",
            directionNav: thumbnailPosition == "no-thumbnails" ? true : false,
            animation: slideshowAnimation == 'none' || slideshowAnimation == 'zoom' ? 'fade' : slideshowAnimation,
            slideshow: slideshowAnimation == 'none' || slideshowAnimation == 'zoom' ? false : true,
            slideshowSpeed: slideshowSpeed ? slideshowSpeed*1000 : 10*1000,
            start: function(slider){
              slider.resize();
            }
          });

          if (slideshowAnimation == 'slide'){
            if($gallery.data("index") == 0) { $('.flex-direction-nav', $gallery).hide() }
          } else {
            if($gallery.length == 1) { $('.flex-direction-nav', $gallery).hide() }
          }
        }
      });

Как я могу заставить эту функцию работать на ajax загруженном контенте?

Answer 1

Вы меняете содержимое своей страницы, а это значит, что вы создаете fre sh DOM-элементы, к которым не прикреплено событие click. Так что, либо вызывайте $('your selector').fancybox() каждый раз, когда вы меняете содержимое, либо используйте опцию selector, чтобы связать событие клика (которое запускает fancybox) с селектором (пример можно найти в документации - https://fancyapps.com/fancybox/3/docs/#usage)