如何定位lightgallery.js滑块中显示的img元素？

解决lightgallery.js滑块中元素的点击事件绑定问题 #

嗨，我懂你遇到的问题了——你写的三种点击事件绑定都失效，核心原因是lightgallery 是动态生成那些图片元素的！当你执行绑定代码的时候，.imgGallery img、img.lg-object.lg-image这些元素还没被渲染到页面上，自然绑定不上事件。

给你两种靠谱的解决方案：

方案1：用事件委托（推荐） #

事件委托是把事件绑定到页面初始就存在的父元素上，利用事件冒泡机制监听动态生成子元素的点击。比如直接绑定到你的lightgallery容器#mosaic：

var $lg = $('#mosaic');
$lg.lightGallery({
  thumbnail: false,
  addClass: 'imgGallery'
});

// 事件委托写法，监听容器内目标图片的点击
$lg.on('click', 'img.lg-object.lg-image', function() {
  console.log('click');
});

这种方法最省心，不用管元素什么时候生成，只要点击发生在容器内的目标图片上，就能触发事件。

方案2：利用lightgallery的回调函数 #

lightgallery提供了不少生命周期回调，你可以在DOM元素生成完成后再绑定事件，比如onOpen（滑块打开后）或者onAfterSlide（切换幻灯片后）：

var $lg = $('#mosaic');
$lg.lightGallery({
  thumbnail: false,
  addClass: 'imgGallery',
  // 滑块打开、DOM渲染完成后绑定事件
  onOpen: function() {
    $('img.lg-object.lg-image').click(function() {
      console.log('click');
    });
  },
  // 如果有多张幻灯片，切换后重新绑定（off避免重复绑定）
  onAfterSlide: function() {
    $('img.lg-object.lg-image').off('click').click(function() {
      console.log('click');
    });
  }
});

这种方法适合需要在特定滑块生命周期节点做操作的场景，记得用off('click')避免重复绑定导致多次触发。

内容的提问来源于stack exchange，提问作者Joe278