javascript - 需要将ajax响应分配给div

Question

我正在使用 Ajax 调用实现图片库。

调用传递一个值并获取 HTML 代码作为响应。我检查了这个回复，它是正确的。

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

但是，如果我使用 AJAX 注入(inject)代码，当我单击图像时，它会在窗口中作为普通图像打开:图库弹出窗口不起作用。

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

代码如下

$.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() 来画廊化一个选择器。然后你改变你的代码阅读

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() 的自定义图库示例

在这种情况下，您只需要通过委托(delegate)拦截对(比如说)A 标签的点击。在这个假设中，你现在正在做类似的事情

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

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

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

请注意，现在您将点击事件绑定(bind)到 #dv_gallery，存在，并通过向 .on() 提供额外参数告诉它充当新添加的“a”标签的委托(delegate).

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);

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