在AJAX调用后附加到Flexslider后，无法使用Fancybox打开图像

Posted 2021-04-06

以下代码在CoffeeScript中，经过几个小时的游戏并最终阅读WooThemes的文档后，我能够让Flexslider在点击我的按钮后正确附加图像以从Instagram加载其余图像。

但是，现在当我点击图片时，它没有像加载页面加载的其他图像那样打开Fancybox，并且想知道我是否可以在这里得到一些帮助。

Slider =
  flexi: ->
    $('.flexslider').flexslider
      animation: 'slide'
      animationLoop: true
      slideshow: false
      itemWidth: 160
      itemMargin: 5
      minItems: 1
      maxItems: 10
      start: (slider) ->
        $('#load-more').on 'click', (event) ->
          event.preventDefault()
          $.ajax
            type: 'get'
            url: $(this).find('a').attr('href')
            dataType: 'jsonp'
            success: (data) ->
              $.each data.data, (index, value) ->
                slider.addSlide '<li class="thumb" data-profile="' + value.user.profile_picture + '" data-lat="0" data-long="0" data-id="' + value.id + '" data-thumb="' + value.images.thumbnail.url + '" data-username="' + value.user.username + '" data-comments="' + value.comments.count + '" data-likes="' + value.likes.count + '" data-text="' + value.caption.text + '" data-link="' + value.link + '"><a href="' + value.images.low_resolution.url + '" class="fancybox fancybox.iframe"><img alt="' + value.images.thumbnail.url.split('/')[3].split('.jpg')[0] + '" src="' + value.images.thumbnail.url + '" /></a></li>'

Fancy =
  box: (lat, lng, pid) ->
    street = undefined
    latLng = new google.maps.LatLng lat, lng
    view = new google.maps.StreetViewService()
    $('.fancybox').fancybox
      width: 1155
      height: '95%'
      maxWidth: '95%'
      maxHeight: '95%'
      openEffect: 'none'
      autoSize: true
      autoResize:  false
      closeEffect: 'fade'
      scrolling: 'auto'
      type: 'iframe'
      helpers:
        media:{}

      beforeShow: ->
        ........

答案

您可以尝试使用live（）或on（）包装fancybox调用，或者更改FancyBox源代码以使用live（）而不是常规bind（）方法。这是一种未经测试的代码，可以帮助您理解。

// 上

$(document.body).on('click', '.fancybox', function() {
    $(this).fancybox({ /* options */ }).trigger('click');
    return false;
}

//活着

$('.fancybox').live('click', function() {
    $(this).fancybox({ /* options */ }).trigger('click');
    return false;
}