在lightgallery内部添加复选框和输入字段不起作用

问题描述

我的图片带有浅色画廊。如果单击图像，将触发它正确显示的图库。但是，当我尝试在灯库中添加复选框和输入字段时，它会正确显示。但是，当我尝试在输入字段中获取值或在复选框中捕获更改事件时，它似乎不起作用。

这是我的HTML代码。

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

在我的js中，我试图捕获一个简单的事件。

解决方法

是的！因此，经过数天的摸索，我找到了解决方案。我刚刚在灯光画廊中添加了一个事件。

var_2