javascript - 模式对话框中的 Jquery 问题

Question

我正在尝试做一些非常简单的事情。基本上我有一个可点击的范围，当我点击它时它会打开编辑模式。我通过 Bootstrap 模式实现了这一点。这工作得很好。

问题是，我用了 plugin对于图像预览，这也可以作为模态。当我单击该跨度时，两个模式会同时打开。它不应该打开图像预览模式。

我理解代码，它的发生是因为“lightgallery”类。当我使用 jquery 单击该范围时，我尝试删除该类。它从 html 中删除，但该函数已经从 DOM 加载。所以它不起作用。当我单击跨度时，两个模态会同时打开。

如果我从 html 中删除“lightgallery”类并运行系统，那么它工作正常。 DOM 的问题。请帮我解决这个问题。

我认为可能有一种更明智的方法，有人可以指出我正确的方向吗？我将非常感激。我尝试过很多方法。

HTML 代码

<ul class="photo-grid lightgallery">
  <li class="col-sm-4 col-xs-6 col-md-3 col-lg-3" data-responsive="img/1-375.jpg 375, img/1-480.jpg 480, img/1.jpg 800" data-src="<?php echo base_url('assets/img/project/1.png'); ?>" data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>">
  <a href="" class="thumbnail"> 
     <img class="img-responsive widthauto" src="<?php echo base_url('assets/img/project/1.png'); ?>">
     <figcaption>
       <p>Fading Light</p>
     </figcaption>
  </a>
  <span class="editbtnprofilea nopadd" data-toggle="modal" data-target="#portimgmodal"><i class="fa fa-pencil-square-o fa-lg" aria-hidden="true"></i></span>                                             
  </li>
</ul>

JS代码

$("#edithire").click(function (e) {
    $('.demo-gallery>.lightgallery').addClass('lightgalleryedit'); 
    $('.demo-gallery>.lightgalleryedit').removeClass('lightgallery');  
    e.stopPropagation();
});

Answer 1

我认为您正在使用 <ul> 进行初始化这将使其子项 <li>作为发起者，即点击<li>或其任何成员都会触发灯光画廊显示，因为您的 <span>也是成员(member)吧。喜欢this .

为了防止这种情况，有几种替代方法，但在这种情况下最好的方法是使用 selector选项 该选项告诉 lightgallery 在初始化时只有那些具有给定选择器的元素才能启动显示。

$({ul-selector}).lightGallery({
  selector: ".onlyme"
}); 

现在分配.onlyme锚定或构成幻灯片的图像，但不定位到 span触发 Bootstrap 模式。

Example