在 lightgallery 中添加复选框和输入字段不起作用答案

【问题标题】：Adding checkboxes and input field inside lightgallery not working在 lightgallery 中添加复选框和输入字段不起作用
【发布时间】：2020-09-30 02:11:25
【问题描述】：

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

这是我的 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 中，我试图捕捉一个简单的事件。

【问题讨论】：

标签： javascript html checkbox lightgallery

【解决方案1】：

耶！所以经过几天的思考，我找到了解决方案。我刚刚在灯光图库中添加了一个事件。

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

【讨论】：