【问题标题】：ajax response needed to be assigned to a div需要将 ajax 响应分配给 div
【发布时间】：2015-09-18 12:22:34
【问题描述】：

我正在使用 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代码

 &lt;div class="portfolio-adaptive adaptive-three" id="dv_gallery"&gt;&lt;/div&gt;

【问题讨论】：

data: {type:product,use:'gallery'}, ... 是产品变量名还是字符串... 即 data: {type:'product',use :'画廊'},
product 是一个包含字符串的变量
您使用的是哪种服务器端语言？
您的画廊 div 在部分内部？
在弹窗中添加打开image的代码

标签： javascript php jquery html ajax

【解决方案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) {
   ...
});

请注意，现在您将点击事件绑定到#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);

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

【讨论】：

【解决方案2】：

你试过使用jquery的html()函数吗？

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

【讨论】：

append 有什么问题？
html 将替换所有之前的内容，append 将添加它
是的，我试过了。但仍然有同样的问题。即使我尝试过 document.getElementById("dv_gallery").innerHTML

【解决方案3】：

$("#dv_gallery").html(data);
上面的代码对你有用

【讨论】：

如果您将在 ajax 响应后获取数据中的数据，那么您将使用 html 函数使用 html 函数并使用 jquery 使用 div id
我以前用过这个，但它不适合我。我正在那里显示图像。但是画廊功能在那里不起作用。
把你的html代码发给我，我会给你解决方案

【解决方案4】：

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

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

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

到

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

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

【讨论】：