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.