Fancybox 无法处理由 ajax 调用加载的内容

Question

There is a quickshop implemented by using the fancybox on the collection pages and now the load more functionality has been implemented which is working fine and on scroll the products form next page is successfully appended.

The issues is the new products which is getting embedded on those quickview not working.

the code is below

$(".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() }
          }
        }
      });

How can I make this function works on the ajax loaded content?

Answer 1

You are changing content of your page and that means you are creating fresh DOM elements that have no click event attached to them. So, either call $('your selector').fancybox() each time you change contents or use selector option to bind click event (that starts fancybox) to the selector (you can find example in the docs - https://fancyapps.com/fancybox/3/docs/#usage )