Javascript：如何在动态添加的元素上定位 lightgallery.js

Question

I'm trying to target dynamic added elements to work with lightgallery.js. See the exemple bellow:

    <div id="animated-thumbs" class="page-divs-middle">
        <!-- STATIC EXAMPLE -->
        <div class="col-md-3 col-xs-3 text-nowrap spacer-page-models fit pulsar">
         <a href="assets/img/01.jpg" data-lightbox="image-1">
            <img class="img-responsive img-responsive-center cover" src="assets/img/01.jpg">
         </a>
    </div>
        <div class="col-md-3 col-xs-3 text-nowrap spacer-page-models fit pulsar">
          <a href="assets/img/01.jpg" data-lightbox="image-1">
            <img class="img-responsive img-responsive-center cover" src="assets/img/01.jpg">
            </a>
        </div>               
        <!-- STATIC EXAMPLE -->
    </div>
<script type="text/javascript">
  $(document).ready(function(){
    $('#animated-thumbs').lightGallery({
     thumbnail:true,
     selector: 'a',
     download:false,
     share:false,
     autoplayControls: false,
    });
   })
</script>

The code above is a static example that's demonstrate how to use lightgallery script, this works as expected. But I'm trying to make the script works adding elements dynamically, like this:

<div id="animated-thumbs" class="page-divs-middle">
        <!-- Elements here were dynamically added -->
        
                  
        <!-- Elements here were dynamically added -->
    </div>
<script type="text/javascript">
  $(document).ready(function(){
    $('#animated-thumbs').lightGallery({
     thumbnail:true,
     selector: 'a',
     download:false,
     share:false,
     autoplayControls: false,
    });
   })
</script>

JavaScript

var target = $('#animated-thumbs');
target.append('<div class="col-md-3 col-xs-3 text-nowrap spacer-page-models fit pulsar"><a href="assets/img/01.jpg"><img class="img-responsive img-responsive-center cover" src="assets/img/01.jpg"></a></div>');

But it's not working because document was loaded previously. Someone can help me?

Answer 1

You need to append html to id="animated-thumbs" before initialising gallery, or reinitialize gallery after appending html. Something like:

$('#animated-thumbs').lightGallery().destroy(true);

$('#animated-thumbs').append('<div><h3>some html to add</h3></div>');

$('#animated-thumbs').lightGallery({ //params });

Please note that this is just description code and it will not work if you just copy it. Check gallery documentation on how to call destroy method (usually they all have it) and apply it to your code. Or if there is 'reinit' method you can skip destroy and just reinit gallery after html appending.