Adding checkboxes and input field inside lightgallery not working

I have images with light gallery. If image is clicked it will trigger the light gallery it displays properly. But when I tried adding checkboxes and input field 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.

                                <div class="row clearfix">
                                        <div class="col-sm-12 lightgallery">
                                            <a class="light-link" data-id="picKey" href=""
                                                data-sub-html='<div style="text-align: center;" class="galleryPics" >
                                                     <label class="fancy-checkbox">
                                                          <input type="checkbox" class="checkbox lg-check picKey  classicpicKey" name="flags[]"  value="0" data-name="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 picKey  LockedpicKey" name="flags[]"  value="1" data-name="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 picKey HiddenpicKey" name="flags[]"  value="2" data-name="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 Cap" name="caption[]" data-name="Cap" value="" placeholder="Minimum of 100 letters." />
                                                 </div>'>

                                               <img class="img-fluid rounded img" style="object-fit: cover; width: 180px; height: 180px; " onerror="this.onerror=null; this.src=''" src="" data-toggle="tooltip" data-placement="top" alt="Thumbnail" data-original-title="Thumbnail" alt="">
                                               <input type="hidden" id="img" name="rotation[]" value="">
                                            </a>
                                        </div>
                                    </div>

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

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