用jQuery重新加載Ajax內容

Question

我正在使用以下內容將頁面中的某些內容加載到簡單的燈箱中。

但是，它的效果很好，在具有class="ajax-page-content"上有多個鏈接時，單擊鏈接A會加載內容A，但是單擊鏈接B也會加載內容A。

如何確保為每個鏈接加載正確的內容？

我是否需要使用location.reload或其他方式重新加載內容？

$('.ajax-page-content').click(function(){  

    var $button = $(this);
    var url = $button.attr('href');

    if ($('#addlee-lightbox-content').length > 0) {

        $('#addlee-lightbox-content').show();
        $('body').addClass('lightbox-open');
    } else {
        $.get(url, '', function (data) {

            var $content = $(data).find('.col');
            var html_content = $content.html();

            var lightbox =
            '<div id="lightboxcontent">' +
                '<div class="lightbox-content animated fadeInDown">' +
                    '<a href="#" class="lightbox-close">&nbsp;</a>' +
                    html_content +
                '</div>' +
                '<div class="lightbox-bg">&nbsp;</div>' +
            '</div>';

            $('body').append(lightbox).addClass('lightbox-open');

        });
    }

    return false;
});

Answer 1

發生錯誤是由於您的腳本邏輯。
您編寫類似：

如果容器存在，請顯示
否則，創建容器，填充它，顯示它

因此，在第二次單擊中，第一個條件將執行。

編輯：邏輯草圖應類似於：

點擊鏈接-獲取Ajax數據
用ajax數據填充容器
顯示模態

一種更改是使用click事件將多個容器添加（並填充）到頁面中。 每個容器應保存一次單擊的ajax數據。
所以像這樣：
單擊LinkA，獲取數據A，填充容器A，打開模式A
單擊LinkB，獲取dataB，填充containerB，打開modalB
點擊LinkA，打開modalA