在 lightgallery.js 滑块中定位 img
target img in lightgallery.js slider
有没有办法定位 lightgallery.js
滑块中显示的 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
});
具有点击事件的 img
元素不在 .imgGallery
div 中。它们实际上在 #mosaic
内。如果将该选择器更改为 $('#mosaic img')
,那么您就已经准备就绪了。
至于其他两个,这些元素是动态创建的,因此在您尝试绑定点击事件时它们并不存在。你想要的是点击委托,这样你就可以将点击事件绑定到外部元素,但在子元素上拦截它。因此,为所有内容创建一个包装器(或者如果不可能,绑定到主体)
$('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)
});
有没有办法定位 lightgallery.js
滑块中显示的 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
});
具有点击事件的 img
元素不在 .imgGallery
div 中。它们实际上在 #mosaic
内。如果将该选择器更改为 $('#mosaic img')
,那么您就已经准备就绪了。
至于其他两个,这些元素是动态创建的,因此在您尝试绑定点击事件时它们并不存在。你想要的是点击委托,这样你就可以将点击事件绑定到外部元素,但在子元素上拦截它。因此,为所有内容创建一个包装器(或者如果不可能,绑定到主体)
$('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)
});