jQueryの動的選択は、最初のトリガーの後に機能しなくなります。

Question

複数のライトボックスを含むページを作成しています。ライトボックス用のボタンはこれです：

<button class="lightbox" data-lb="result-slide1">See More Results</button> 

ライトボックスは、次のようにトリガーされます。

var lightboxButtons = $('.lightbox'); 

lightboxButtons.on('click', function(e) { 
    e.preventDefault(); 
    var button = $(this); 
    var lightboxData = button.attr("data-lb"); 
    overlay.fadeIn(); 
    lightboxDisplay(lightboxData); 
}); 

そしてライトボックスが次のように表示されます。

function lightboxDisplay(content) { 
    var lightboxHTML = $('#' + content); 
    lightboxContent.html(lightboxHTML); 
    lightboxContainer.fadeIn(); 
}; 

だから、基本的にスクリプトを取得しますボタンのdata-lb属性に一致するidの要素を探し、その要素のhtmlをライトボックスに入れます。

1. ライトボックスボタンAが

再びトリガされ

ライトボックスボタンBが

ライトボックスボタンAをトリガされ

トリガーされます。

問題は、これらのステップが起こる場合、これは動作を停止していることですこの場合、ライトボックスは表示されますが、ライトボックスには内容はありません。私がconsole.log(lightboxHTML)の場合、それらの手順に従うと空のオブジェクトが表示されるので、問題は何とかその変数と何か関係があります。探してくれてありがとう。

編集：ここでは閉じるボタンがクリックされたときに実行される機能は次のとおりです。

function lightboxReset() { 
    overlay.fadeOut(); 
    lightboxContainer.fadeOut(); 
}; 

EDIT2：ここではjQueryの選択からライトボックスに入るかもしれないもののいくつかのHTMLです：

<article class="slide-content results-lb-container" id="result-slide1"> 
    <img src="img/profile-placeholder.png" alt=""> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at eleifend orci. Aliquam ac bibendum erat. Sed dapibus placerat feugiat. Nam et risus a purus scelerisque dignissim at ac purus. Donec dapibus nulla et lectus fringilla elementum. Vivamus orci ipsum, tincidunt id nisl posuere, rutrum imperdiet nibh. Fusce vitae dignissim libero. Nulla vel sapien urna. Fusce et mauris et neque imperdiet suscipit. In pretium elit felis, in consequat nulla ornare et. Etiam finibus nibh lorem, vitae placerat magna commodo ut.</p> 
</article> 

Answer 1

これを試してください：

function lightboxDisplay(content) { 
    var lightboxHTML = $('#' + content); 
    lightboxContent.html(lightboxHTML.html()); 
    lightboxContainer.fadeIn(); 
};