javascript - 如何使用 AJAX 调用 jQuery Lightbox

Question

如何使用 AJAX 调用 jQuery Lightbox2。

我正在我的项目中使用此功能。

$(document).ready(function() {
    $(".paylasimi-goster").click(function() {
        event.preventDefault();
        var id = $(this).data("id");
        $.ajax({
            url: "gonderiyi_goster.php?msg_id=" + id,
            type: 'get',
            beforeSend: function() {
                $("#loader").fadeIn(100);
            },
        }).done(function(data) {
            $("#loader").fadeOut(100);
            $(".sidebar").fadeIn().find(".sidebar-content").animate({
                "right": 0
            }, 200).html(data);
            imgResize(jQuery, 'smartresize');
        });
    });

    $(".sidebar").click(function() {
        $(".sidebar-content").animate({
            "right": "-565px"
        }, 200, function() {
            $(".sidebar").fadeOut();
        })

    });
    $(".sidebar-content").click(function(e) {
        e.stopPropagation();
    });
});

我还创建了这个 DEMO 来自 jsfiddle。在这个 jsfiddle 中你可以看到白色的 div。单击任意白色 div，然后查看右侧边栏。所以在侧边栏中有一张图像。问题出在这里:当您单击图像时，Lightbox2 不起作用。

如何使用ajax调用Lightbox2。

Answer 1

这里的问题是e. .sidebar-content 点击事件上的 stopPropagation() 阻止灯箱触发。您可以完全删除它并在 .sidebar 点击事件中调用:

$(".sidebar").click(function(e){
     var preventClick = $(".sidebar-content");

     if (!preventClick.is(e.target) && preventClick.has(e.target).length === 0){
       //run the hide animate function + callback 
       $(".sidebar-content").animate({"right":"-200px"},200,function(){
           $(".sidebar").fadeOut();   
       });
     };     
});

FIDDLE