jquery trigger('click') 只工作一次

Question

我正在尝试自定义一个名为 LightGallery 的 jQuery 灯箱插件来实现以下结果：

1- 使脚本从文件夹中获取所有图像，使用索引增量作为图像路径；

2- 单击另一个元素后打开灯箱。

问题是：

该插件只打开灯箱一次！。

我第一次使用 trigger('click') 触发它，但在关闭它并尝试再次单击以重复它后它不起作用。

插件看起来已损坏，只能打开一张图片！

我希望它在我每次单击目标元素时打开灯箱。

这是我的尝试：( Pen here )

$(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>

Answer 1

我快速查看了您的代码，发现您正在加载动态数据甚至委托，https://learn.jquery.com/events/event-delegation/ 问题是，在事件绑定的那一刻，并非所有真正存在的 "a" 元素都可以在其上绑定事件

您的触发事件应该类似于

$(document).on('click','#someId a:first-child',function(){

})

Answer 2

LightGallery需要销毁重新初始化

要销毁 LightGallery，请使用此代码 $lg.data('lightGallery').destroy(true);

来源：https://github.com/sachinchoolur/lightGallery/issues/238#issuecomment-161020492

Pen

$(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>

Answer 3

你没有以正确的方式摧毁 LightGallary。

将此用于“onCloseAfter.lg”事件：

$lg.on('onCloseAfter.lg', function(event) {
  $lg.children().remove();
  $lg.toggle();
  //$lg.lightGallery().destroy(true);
  $lg.data('lightGallery').destroy(true);
});

jquery trigger('click') 只工作一次

jquery trigger('click') works only once

javascript

jquery

lightbox

lightgallery