モーダルダイアログのJqueryの問題

Question

私は非常に簡単なことをしようとしています。基本的にクリック可能なスパンがあります。クリックするとモーダルを開いて開きます。私はBootstrapモーダルでこれを達成しました。これは正常に動作します。

問題は、イメージプレビューにpluginを使用しました。これはモーダルとしても機能します。そのスパンをクリックすると、同時に2つのモーダルが開きます。イメージプレビューモーダルを開くべきではありません。

私はコードを理解しており、 'lightgallery'クラスのために発生します。 jqueryを使用してそのスパンをクリックすると、そのクラスを削除しようとしました。それはhtmlから削除されましたが、その関数はすでにDOMからロードされています。それは働いていない。スパンをクリックすると、同時に2つのモーダルが開きます。

「lightgallery」クラスをhtmlから削除してシステムを実行した場合、正常に動作します。 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

私はあなたが、これはすなわち開始剤としてその子<li>になるだろう<ul>をusin初期化されていると思います。あなたの<span>もメンバーであるので、<li>またはそのメンバーのいずれかをクリックすると、ライトギャラリーが表示されます。 thisのように。

これを防ぐには、いくつかの選択肢がありますが、この場合は、selectorオプションを使用するのが最適です。このオプションは、指定されたセレクタを持つ要素だけがショーを起動できるように、初期化中にlightgalleryに通知します。

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

今.onlymeがアンカーかではなく、ブートストラップモーダルをトリガspanへのスライドを作るの画像に割り当てます。

Example