jquery触发器（'click'）只能工作一次
[英]jquery trigger('click') works only once
问题描述
我正在尝试自定义一个名为LightGallery的jQuery灯箱插件，以实现以下结果：
1-使用索引增量作为图像路径，使脚本从文件夹中获取所有图像;
2-单击另一个元素后打开灯箱。
问题是：
该插件仅打开灯箱一次！ 。
我正在使用trigger('click')第一次触发它，但在关闭它并尝试再次点击它再次重复它不起作用。
该插件看起来被破坏，它只打开一个图像！
我希望每次单击目标元素时都打开灯箱。
这是我的尝试:(这里是笔 ）
$(document).ready(function() { var $lg = $('#lightgallery'); function fetchFolderImages() { var checkImages, endCheckImages; var img; var imgArray = new Array(); var i = 1; var myInterval = setInterval(loadImage, 1); if ($lg.children().length > 0) { checkImages = false; endCheckImages = true; } else { checkImages = true; endCheckImages = false; } function loadImage() { if (checkImages) { checkImages = false; img = new Image(); img.src = 'http://sachinchoolur.github.io/lightGallery/static/img/' + i + '.jpg'; img.onload = moreImagesExists; img.onerror = noImagesExists; } if (endCheckImages) { clearInterval(myInterval); console.log('function [loadImage] done'); runLightGallery(); return; } } function moreImagesExists() { imgArray.push(img); $lg.append($('<a/>', { 'href': img.src }).html(img)); i++; checkImages = true; console.log('function [moreImagesExists] done'); } function noImagesExists() { endCheckImages = true; console.log('function [noImagesExists] done'); } console.log('function [fetchFolderImages] done'); } function runLightGallery() { if ($lg.lightGallery()) { //alert('working'); } else { //alert('destroyed'); $lg.lightGallery({ thumbnail: true }); } //trigger click event on image to open the lightbox $lg.children('a').trigger('click'); //empty method, thought we may can use $lg.on('onAfterOpen.lg', function(event) { //maybe we can use this method? }); $lg.on('onCloseAfter.lg', function(event) { $lg.children().remove(); $lg.toggle(); //$lg.lightGallery().destroy(true); }); console.log('function [runLightGallery] done'); } $('.gallery-item').each(function() { $(this).on('click', function() { $lg.toggle(); fetchFolderImages(); }); }); });
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.16/css/lightgallery.css" /> </head> <body> <div class="gallery"> <div class="gallery-item">Gallery Item 1</div> <div class="gallery-item">Gallery Item 2</div> <div class="gallery-item">Gallery Item 3</div> </div> <div id="lightgallery" style="display: none; border: 5px solid red"></div> <!--============== scripts ==============--> <!-- jQuery --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.js"></script> <!-- jQuery mouse wheel --> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script> <!-- lightGallery : a lightbox jQuery plugin --> <script src="//cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.16/js/lightgallery.js"></script> <!-- lightGallery plugin for thumbnails --> <script src="//cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.16/js/lg-thumbnail.js"></script> </body> </html>
3 个解决方案
解决方案1
2 已采纳 2016-04-02 03:09:13
LightGallery需要再次销毁和初始化
要销毁LightGallery，请使用此代码$lg.data('lightGallery').destroy(true);
来源： https ： //github.com/sachinchoolur/lightGallery/issues/238#issuecomment-161020492
$(document).ready(function() { var $lg = $('#lightgallery'); function fetchFolderImages() { var checkImages, endCheckImages; var img; var imgArray = new Array(); var i = 1; var myInterval = setInterval(loadImage, 1); if ($lg.children().length > 0) { checkImages = false; endCheckImages = true; } else { checkImages = true; endCheckImages = false; } function loadImage() { if (checkImages) { checkImages = false; img = new Image(); img.src = 'http://sachinchoolur.github.io/lightGallery/static/img/' + i + '.jpg'; img.onload = moreImagesExists; img.onerror = noImagesExists; } if (endCheckImages) { clearInterval(myInterval); console.log('function [loadImage] done'); runLightGallery(); return; } } function moreImagesExists() { imgArray.push(img); $lg.append($('<a/>', { 'href': img.src }).html(img)); i++; checkImages = true; console.log('function [moreImagesExists] done'); } function noImagesExists() { endCheckImages = true; console.log('function [noImagesExists] done'); } console.log('function [fetchFolderImages] done'); } function runLightGallery() { if ($lg.lightGallery()) { //alert('working'); } else { //alert('destroyed'); $lg.lightGallery({ thumbnail: true }); } //trigger click event on image to open the lightbox $lg.children('a').trigger('click'); //empty method, thought we may can use $lg.on('onAfterOpen.lg', function(event) { //maybe we can use this method? }); $lg.on('onCloseAfter.lg', function(event) { $lg.children().remove(); $lg.toggle(); $lg.data('lightGallery').destroy(true); }); console.log('function [runLightGallery] done'); } $('.gallery-item').each(function() { $(this).on('click', function() { $lg.toggle(); fetchFolderImages(); }); }); });
<html> <head> <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.16/css/lightgallery.css" /> </head> <body> <div class="gallery"> <div class="gallery-item">Gallery Item 1</div> <div class="gallery-item">Gallery Item 2</div> <div class="gallery-item">Gallery Item 3</div> </div> <div id="lightgallery" style="display: none; border: 5px solid red"></div> <!--============== scripts ==============--> <!-- jQuery --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.js"></script> <!-- jQuery mouse wheel --> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script> <!-- lightGallery : a lightbox jQuery plugin --> <script src="//cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.16/js/lightgallery.js"></script> <!-- lightGallery plugin for thumbnails --> <script src="//cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.16/js/lg-thumbnail.js"></script> </body> </html>
解决方案2
1 2016-04-03 06:38:33
你没有以正确的方式摧毁LightGallary。
用于' onCloseAfter.lg '事件：
$lg.on('onCloseAfter.lg', function(event) {
$lg.children().remove();
$lg.toggle();
//$lg.lightGallery().destroy(true);
$lg.data('lightGallery').destroy(true);
});
解决方案3
0 2016-04-02 02:39:57
我快速查看了你的代码并看到你正在加载动态数据尝试甚至委托， https：//learn.jquery.com/events/event-delegation/问题是，在事件绑定的那一刻，并非所有的“a “真正存在的元素可以绑定事件
你的触发事件应该是这样的
$(document).on('click','#someId a:first-child',function(){
})
jQuery on（'click'）仅工作一次
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.