需要将ajax响应分配给div

Question

我正在使用Ajax调用实现一个图像库.

调用传递一个值并获取HTML代码作为响应.我检查了这个回答,这是正确的.

如果我将此代码放入静态DIV中,则库可以正常工作.

但是如果我用AJAX注入代码,当我点击图像时,它会在窗口中作为普通图像打开:图库弹出窗口无法正常工作.

可能是造成这个问题的原因是什么？

代码如下

$.ajax({

    type: 'GET',
    url: 'www.test.com',
    data: {
        type: product,
        use: 'gallery'
    },
    dataType: 'html',
    success: function(data) {
        $("#dv_gallery").append(data);
    }

});

以下是页面中的HTML代码

 <div class="portfolio-adaptive adaptive-three" id="dv_gallery"></div>

Answer 1

除非库(你没有指定)完全基于CSS,否则你几乎肯定需要调用某种初始化代码.

通常在加载时由库代码处理:

// This "animates" all gallery DIVs **THAT EXIST NOW**
<script src="gallery.js"></script>

检查图库API.假设有一个叫$.gallery()gallerize选择器的调用.然后你改变你的代码阅读

success: function(data) {

    $("#dv_gallery").append(data);

    // The $('#dv_gallery') below includes also the newly appended data
    $("#dv_gallery")
        .not(".already-initialized")
        .addClass("already-initialized")
        .gallery();
}

基于.click()的自定义库的示例

在这种情况下,您只需要通过委派拦截(例如)A标签上的点击.在这个假设中,你现在正在做类似的事情

$('#dv_gallery a').on('click', function(event) {
   ...
});

这适用于那些静态存在的A. 要使其与动态添加的A标签一起使用,您应该这样做

$('#dv_gallery').on('click', 'a', function(event) {
   ...
});

请注意,现在您将click事件绑定到存在的 #dv_gallery,并通过向.on()提供额外参数来告诉它充当新添加的'a'标记的委托.

FancyBox示例:

// Select gallery container
$("#dv_gallery")
    // Images are embedded in A tags in Fancybox
    .find('a')
    // But we do not want to fancybox already gallerified images
    .not(".already-initialized")
    // And we want to mark as gallerified those we process now
    .addClass("already-initialized")
    // Everything is ready -- build these new A's into fancyboxes
    .fancybox({
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   600, 
        'speedOut'      :   200, 
        'overlayShow'   :   false
    });

如果API足够智能,不会重新加载已经丰富的元素,那么你不需要添加信号量类,但可以简单地做

$("#dv_gallery").append(data);
$("#dv_gallery").gallery();

或者如果不是,但是你知道它添加了一个给定的类,你可以直接使用那个作为信号量:

    $("#dv_gallery")
        .not(".gallery-class")
        .gallery();

使用返回的HTML诊断不那么明显的问题

jQuery应该正确附加HTML; 如果没有,请检查返回文档的Content-Type,然后尝试使用

   $("#dv_gallery").append($(data));

或尝试替换图库的所有内容:

   $("#dv_gallery").html(data);

在这两种情况下,您都需要重新调用任何所需的库初始化代码.最后两个选项只是诊断,但是 - 如果它们起作用,它会告诉你返回的对象中有些东西是可疑的.