javascript - lightgallery.js slider 中的目标图像

Question

有没有办法定位 lightgallery.js slider 中显示的 img ？

下面的这个 JS 有 3 次未能获得简单的 console.log(); :

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

$('.imgGallery img').click(function() {
     console.log('click'); // fail
});
$('img.lg-object.lg-image').click(function() {
     console.log('click'); // fail
});
$('div.lg-img-wrap img').click(function() {
     console.log('click'); // fail
});

JSFIDDLE

Answer 1

具有点击事件的 img 元素不在 .imgGallery div 内。它们实际上位于#mosaic 内部。如果您将该选择器更改为 $('#mosaic img')，那么您就已经准备好了。

至于其他两个，这些元素是动态创建的，因此在您尝试绑定(bind)单击事件时它们不存在。您想要的是单击委托(delegate)，以便将单击事件绑定(bind)到外部元素，但在子元素上拦截它。因此，为所有内容创建一个包装器(或者如果不可能，则绑定(bind)到主体)

$('body').click('img.lg-object.lg-image', function(e) {
 console.log('click'); // success
 console.log(this); // body (element to which the event is bound)
 console.log(e.target); // img.lg-object.lg-image (element that received the click)
});