Adding checkboxes and input field inside lightgallery not working

Question

I have images with a light gallery. If an image is clicked it will trigger the light gallery it displays properly. But when I tried adding checkboxes and input fields inside the light gallery it displays properly. But when I tried to get the value in the input field or catch the change event in the checkbox it doesn't seem to work.

Here is my HTML code.

$('.lg-check').on('change', function() {
  console.log('s');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row clearfix">
  <div class="col-sm-12 lightgallery">
    <a class="light-link" data-id="{{ $key }}picKey" href="{{ URL::asset($fullPath) }}" data-sub-html='
      <div style="text-align: center;" class="galleryPics" >
         <label class="fancy-checkbox">
         <input type="checkbox" class="checkbox lg-check {{ $key }}picKey  classic{{ $key }}picKey" name="flags[{{ $picture->picture_id }}]" {{ ($picture->flag == 0) ? ' checked ' : ' ' }} value="0" data-name="{{ $key }}picKey">
         <span style="color: green; margin-right: 3px; font-size: 18px"><i></i><strong>Classic</strong></span>
         </label>
         <label class="fancy-checkbox">
         <input type="checkbox" class="checkbox lg-check {{ $key }}picKey  Locked{{ $key }}picKey" name="flags[{{ $picture->picture_id }}]" {{ ($picture->flag == 1) ? 'checked ' : ' ' }} value="1" data-name="{{ $key }}picKey">
         <span style="color: brown; font-size: 18px"><strong>Locked</strong> <i></i></span>
         </label>
         <label class="fancy-checkbox">
         <input type="checkbox" class="checkbox lg-check {{ $key }}picKey Hidden{{ $key }}picKey" name="flags[{{ $picture->picture_id }}]" {{ ($picture->flag == 2) ? 'checked ' : ' ' }} value="2" data-name="{{ $key }}picKey">
         <span style="color: red; font-size: 18px"><i></i><strong>Hidden</strong></span>
         </label><br>
         <label> <strong>Caption</strong> </label> <span class="required">*</span>
         <input type="text" maxlength="100" class="form-control caption {{ $key }}Cap" name="caption[{{ $picture->picture_id }}]" data-name="{{ $key }}Cap" value="{{ $picture->caption != null ? $picture->caption : null }}" placeholder="Minimum of 100 letters." />
      </div>
      '>
      <img class="img-fluid rounded img{{ $picture->picture_id }}" style="object-fit: cover; width: 180px; height: 180px; {{ $rotate }}" onerror="this.onerror=null; this.src='{{ URL::asset('/admin/images/image_icon.jpg') }}'" src="{{ URL::asset($fullPath) }}" data-toggle="tooltip" data-placement="top" alt="Thumbnail" data-original-title="Thumbnail" alt="">
      <input type="hidden" id="img{{ $picture->picture_id }}" name="rotation[{{ $picture->picture_id }}]" value="{{ ($picture->rotation != null ? $picture->rotation : null) }}">
      </a>
  </div>
</div>

And in my js, I tried to catch a simple event.

Answer 1

Yay! So after days of figuring out, I found the solution. I just added an event to light gallery.

$flaglightgallery.on('onAfterAppendSubHtml.lg', function() { 
   // things you want to happen after triggering light gallery.
});