基于.click（）

Question

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

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

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

但是如果我用AJAX注入代码，当我点击图像时，它会在窗口中作为普通图像打开：图库弹出窗口无效。

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

代码如下

＆＃13;

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

＆＃13;

以下是页面中的HTML代码

＆＃13;

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

＆＃13;

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（）

的自定义库的示例

在这种情况下，您只需要通过委派拦截（例如）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);

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

Answer 2

您是否尝试过使用jquery的html（）函数？

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

Answer 3

$("#dv_gallery").html(data);
以上代码适合您

Answer 4

问题是，尽管您的代码没有显示click代码，但很可能是因为它在事后加载而无法识别。与图库代码无关。

简单地说，尝试更改点击代码，例如

$('.myClass').on( 'click', function(){ ... } )

要

$('body').on( 'click', '.myClass',  function(){ ... } )

这会将点击引导到正文，然后应该触发您的图库代码。

需要将ajax响应分配给div

4 个答案:

基于.click（）

FancyBox示例：

使用返回的HTML