在lightgallery.js滑块中定位img

时间:2018-05-17 17:28:10

标签: javascript jquery lightgallery

有没有办法定位img滑块中显示的lightgallery.js

下面的 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

1 个答案:

答案 0 :(得分:1)

具有click事件的img元素不在.imgGallery div中。他们实际上在#mosaic之内。如果您将该选择器更改为$('#mosaic img'),那么您将全部设置为该选择器。

对于其他两个元素,这些元素是动态创建的,因此在您尝试绑定单击事件时它们不存在。你想要的是点击委托,这样你就可以将click事件绑定到外部元素,但是在子元素上拦截它。因此,围绕一切创建一个包装器(或者如果不可能的话,绑定到主体)

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